How to integrate Twitter Bootstrap 3 with PHP CodeIgniter Framework

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.

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.

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

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.