How to integrate Twitter Bootstrap 3 with PHP CodeIgniter Framework

On 6/17/2014

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

I hope you have enjoyed this CodeIgniter Bootstrap Tutorial.

Last-Modified: Jun-2-2016

29 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

Contact Form

Name

Email *

Message *