Login

fresh96 · 09-02-2018, 09:01 PM

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>

Pertti · 09-03-2018, 12:56 AM

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.

**InsiteFX** · 09-03-2018, 09:05 AM

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>

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009. ( Skype: insitfx )

Wouter60 · 09-03-2018, 01:03 PM

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).