+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: Bootstrap.css not working (/showthread.php?tid=71593)
Bootstrap.css not working - fresh96 - 09-02-2018
I am new to CodeIgniter, and currently practicing it because we have to use this framework for a huge project. Right now I'm creating a sample project with bootstrap. It doesn't work when I download bootstrap, put it in a folder with the same level as application and system folders. But if I use bootstrap's CDN, it actually works but I don't want to do that because in our major project we will be using a custom bootstrap template which does not have a CDN link.
At first, I thought it was the base_url, but it works when I link it with an image.
note:
- I removed the usage of index.php
- I also tried putting the css and js folders inside an "assets" folder, doesn't work either
the root folder directory of ci_sample:
- application
- system
- css
bootstrap.css
- js
jquery.js
bootstrap.js
- .htaccess
my changes at config.php:
Code:
$config['base_url'] = 'http://localhost/ci_sample/';
$config['index_page'] = '';changes at autoload.php:
Code:
$autoload['helper'] = array('url', 'html');.htaccess at root:
Code:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]Code:
<?php
class Pages extends CI_Controller{
public function view($page = 'home'){
if(!file_exists(APPPATH.'views/pages/'.$page.'.php')){
show_404();
}
$data['title'] = ucfirst($page);
$this->load->helper('url');
$this->load->view('pages/'.$page, $data);
}
}Code:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$route['default_controller'] = 'pages/view';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;Code:
<html>
<head>
<link rel="stylsheet" href="<?php echo base_url();?>css/bootstrap.css" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Hello</h1>
</div>
<div class="col-md-6">
<img src="<?php echo base_url();?>images/fb4.jpg">
</div>
</div>
</div>
</body>
<footer>
<script src="<?php echo base_url();?>js/jquery.js"></script>
<script src="<?php echo base_url();?>js/bootstrap.js"></script>
</footer>
</html>RE: Bootstrap.css not working - Pertti - 09-03-2018
Other than I'd probably change URL reference to base_url('css/bootstrap.css'), it seems like it should work.
On Chrome, can you see any errors in Developer Tools, that's usually good place to identify any loading issues to pinpoint the error.
RE: Bootstrap.css not working - InsiteFX - 09-03-2018
For one you should create an assets folder and place all of you css and js in to it.
This is for an assets folder along with the index.php
PHP Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these -->
<base href="<?php echo base_url(); ?>">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<title>Home</title>
<!-- favicon -->
<link rel="icon" href="<?php echo base_url('assets/favicon.ico'); ?>">
<!-- Bootstrap CSS file -->
<link href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assets/bootstrap/css/bootstrap-theme.min.css'); ?>" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="<?php echo base_url('assets/js/html5shiv/html5shiv.min.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/respond/respond.min.js'); ?>"></script>
<![endif]-->
<!-- Pass base_url() and site_url() to JavaScript -->
<script>
var baseUrl = "<?php echo base_url(); ?>";
var siteUrl = "<?php echo site_url(); ?>";
</script>
</head>
<body>
Notice the top 3 line those are required by Bootstrap.
This Example is from Bootstrap of the Basic Template:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>RE: Bootstrap.css not working - Wouter60 - 09-03-2018
For what it's worth:
Code:
<head>
<link rel="stylsheet" href="<?php echo base_url();?>css/bootstrap.css" type="text/css">
</head>"stylsheet" should be "stylesheet".
But you definitely should place the complete bootstrap folder structure inside a folder called "assets". The bootstrap.js javascript needs that (relative links).