• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Bootstrap.css not working

#1
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]
 pages controller (Pages.php):
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);
       }
       
   }
routes.php:
Code:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');


$route['default_controller'] = 'pages/view';

$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
views/home.php
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>
Reply

#2
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.
Reply

#3
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 *mustcome first in the headany other head content must come *afterthese -->

    <
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>
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply

#4
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).
Reply


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2019 MyBB Group.