How to integrate Twitter Bootstrap with PHP CodeIgniter Framework

On 11/14/2017

Hi, as a nice addition to our codeigniter tutorials series, I'm back with another article which discusses about CodeIgniter and Bootstrap integration. This will teach you the technique of combining the power of two robust frameworks, PHP CodeIgniter and Twitter Bootstrap. You should properly integrate twitter bootstrap 3 with code igniter framework for it to work. I'm going to assume you are individually acquainted with CodeIgniter and Bootstrap frameworks, so in this tutorial will just show you how to integrate Bootstrap with CodeIgniter by which you can enhance the appearance of your CodeIgniter application.

In case you don't have, download the latest versions of the frameworks from the links given below.

Step-by-Step Instruction for CodeIgniter Bootstrap Integration

STEP-1) First download and extract the PHP CodeIgniter framework zip file to your working folder. Then create a folder named "assets" to keep all your bootstrap files. Just make sure your CodeIgniter folder structure is similar to the below image.

integrate-twitter-bootstrap-with-codeIgniter

Recommended Read: How to Create Login Form in CodeIgniter, MySQL and Twitter Bootstrap

Recommended Read: How to Create User Registration Form in CodeIgniter, MySQL & Bootstrap

STEP-2) Next extract and move the css, js and fonts folder of Twitter bootstrap CSS to the "assets" folder we have created in STEP-1.

use-twitter-bootstrap-with-codeIgniter

STEP-3) We need jQuery library for the Bootstrap's js plugins to work. So move the jQuery file to the "assests/js" folder.

Now the setup is over. To start using bootstrap in CodeIgniter, we have to include the bootstrap ".css" and ".js" files to CodeIgniter views.

To include the bootstrap css file, add this line above the </head> tag in the CodeIgniter view file.

<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>" />

Next we have to include js files for which you should add the below code just before the </body> tag.

<script type="text/javascript" src="<?php echo base_url("assets/js/jQuery-1.10.2.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script>

Note: Make sure you always add the jQuery library before "bootstrap.js".

Recommended Read: CodeIgniter Bootstrap Tutorial - Read and Display data from MySQL Database

Recommended Read: CodeIgniter Bootstrap: Insert Form Data into Database with Field Validations

Having setup the environment to use Twitter Bootstrap with CodeIgniter, our app is ready for development.

How to Use Bootstrap CSS in CodeIgniter?

Now we have bootstrap files in place. The next question that rise would be where and how to use this bootstrap css in codeigniter?

Well! As I have already said bootstrap is just a ready-made stylesheet but with higher flexibility. You have to include it's css styles in html tags as you would normally do. Just take this example. I have added a simple comment form in codeigniter view.

<div>
    <?php $attributes = array("name" => "comment-form");
    echo form_open("user_comments/submit", $attributes);?>
        <div class="form-group">
            <textarea name="comment" placeholder="Your comments..." rows="4"></textarea>
        </div>
        <div class="form-group">
            <input type="submit" name="submit" value="Post Comment">
        </div>
    <?php echo form_close(); ?>
</div>

As there are no css styles added to beautify the form, it looks plain simple like this,

use-bootstap-in-codeigniter-before

Next I have included some css classes from bootstrap to this very same form.

    
<div class="well" style="width:50%; margin: 0 auto;">
    <?php $attributes = array("name" => "comment-form");
    echo form_open("user_comments/submit", $attributes);?>
        <div class="form-group">
            <textarea name="comment" placeholder="Your comments..." rows="4" class="form-control"></textarea>
        </div>
        <div class="form-group">
            <input type="submit" name="submit" value="Post Comment" class="btn btn-danger">
        </div>
    <?php echo form_close(); ?>
</div>

Boom! The form looks much more pleasing now without writing any of those styles of our own.

use-bootstap-in-codeigniter-after

Convenient! I think you have got a good idea about bootstrap now. You can customize bootstrap css to your liking without trouble. And to be honest it will take a while for you to get around with bootstrap elements.

For more detailed usage head over to our codeigniter section and start reading. I have used bootstrap css in almost all of my codeigniter tutorials.

Loading Bootstrap CSS via CDN:

Here's the good news. Bootstrap is available in CDN and you don't even have to download it to your own server for using it. Just directly load it from maxcdn like this,

<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1.0" name="viewport" >
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
    
        ...
        ...
    
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
    </body>
</html>

If you use slow server then take advantage of this CDN route for using bootstrap.

I hope you have enjoyed this CodeIgniter Bootstrap Tutorial.

Last-Modified: 14-Nov-2017

31 comments:

  1. Hey. Mine is still not working. I followed the procedure aboce.

    ReplyDelete
    Replies
    1. Hey, you need to have the "url" helper loaded in your bootstrap config file.
      Open /application/config/autoload.php
      Find: $autoload['helper'] = array();
      Edit to : $autoload['helper'] = array('url');

      Should work beter right after.

      Delete
  2. Hi Kedar,

    Here are some working examples of using twitter bootstrap framework with codeigniter.

    http://www.kodingmadesimple.com/2014/08/how-to-create-login-form-codeigniter-mysql-twitter-bootstrap.html

    http://www.kodingmadesimple.com/2014/07/codeigniter-mysql-tutorial-read-display-data-bootstrap.html

    Please check them. Let me know if you still had issues.

    Keep visiting:)

    ReplyDelete
  3. You can enable the URL helper inside the controller
    $this->load->helper('url');

    ReplyDelete
  4. I dont know, why this procedure is not workig for me. I have enabling the URL helper.

    ReplyDelete
    Replies
    1. Hi! what's the exact issue you face here? Have you tried testing the bootstrap css classes by using them in view file?

      If not then try one of these articles,

      http://www.kodingmadesimple.com/2014/08/how-to-create-login-form-codeigniter-mysql-twitter-bootstrap.html

      http://www.kodingmadesimple.com/2015/03/codeigniter-contact-form-tutorial-email.html

      http://www.kodingmadesimple.com/2015/05/codeigniter-database-crud-tutorial-for-beginners-examples.html

      They are working examples of bootstrap css with codeigniter.

      Delete
  5. I had used your method and it is working. However I can't find a way to make offline jquery js file loads without using CDN method. Is there any way?

    ReplyDelete
    Replies
    1. Hi, say if my codeigniter app name is 'ciapp', then the base_url() function will produce path like 'http://localhost/ciapp' (if you work in localhost).

      Just make sure you have the assets folder just inside the root folder and follow the rest of the steps. It should work.

      Cheers.

      Delete
    2. Thank you for the reply.

      Of course. I had made it. Its just i wonder which js files that i have to save in my server to run jquery smoothly.

      Delete
    3. Hi, I have used jQuery-1.10.2.js version in the above example. It works best with bootstrap 3.x version. You can use the same too.

      Cheers :-)

      Delete
  6. its worked... thanks for sharing

    ReplyDelete
  7. I'm using Dreamweaver CC 2015 and recently started learning Bootstrap3. Came across this as I was searching for a good way to get into mysql/php with bootstrap as Dreamweaver removed their db panels (not that I wanted to use them anyway as I wanted more 'hands on' coding.) I hadn't heard of CodeIgniter but now have downloaded all and installed on a new domain. Really eager to try these three DW/CI/BS3 along with PHP/MySQL in your tutorials. Thanks!

    ReplyDelete
    Replies
    1. Hi! Thanks for your support. I'm glad my blog is providing value to it's readers.

      Cheers.

      Delete
  8. Thx a lot, you saved me a big time.

    Also I needed to change:

    Open /application/config/autoload.php
    Find: $autoload['helper'] = array();
    Edit to : $autoload['helper'] = array('url');

    ReplyDelete
  9. hai.thank u so much for this tutorial.it works!.

    ReplyDelete
  10. i have created a controller Home.php. and if the user is loged in how to redirect to home.php

    ReplyDelete
    Replies
    1. You have to save session and redirect with, redirect("home/index");

      Please refer here Codeigniter login and registration system

      Cheers.

      Delete
  11. Why this does not work with Bootstrap Glyphicons?

    ReplyDelete
  12. mine is still not working i've followed the procedures.. and make the assets folder same with the application folder level.. how can i resolve this one .. do i need to change something on my htaccess ?

    ReplyDelete
  13. how to access this from the browser?
    localhost/codeigniter?? after this??

    ReplyDelete
  14. first im really thank your create great tutorial, but i have a question how i put my admin folder, images folder, and module folder...same put in assets folder ?

    ReplyDelete
  15. Wow, this is a great twitter integration. Boostrap has become so popular. It should be a standard for start ups.

    ReplyDelete

Contact Form

Name

Email *

Message *