Twitter bootstrap is the most popular responsive web design (RWD) framework today. This tutorial will be divided into 2 parts as below:
- Integrate codeigniter with twitter bootstrap responsive web design(RWD) framework.
- Create a new common layout and use in the view files.
Both of these steps are independent of each other and can be implemented alone if needed.
Integrate bootstrap 3 with codeigniter 3
This is a really simple task which can be implemented in two ways:
By using a content delivery network (CDN)
This is by far simplest and faster solution. Advantage of using CDN is that content is usually served faster since CDN servers may serve content to your users from a nearer location. Another advantage is that your users may already have accessed same CDN network and the content may be cached on your browser/computer, thus taking less time to load.
Below is how we implement it:
create a view file bs_layout.php in the view folder. We are creating it under view/demo for demo purposes. Paste below content in the file:
This is the layout which will be called from the controller along with content parameters and it will ensure same layout is loaded every time without need to include all the resources on different pages.
Loading resources locally
If you do not want to use CDN , you can download resources from http://getbootstrap.com/getting-started/ and include the links instead of external CDN references.
e.g. you can do something like below:
<script src="<?php echo base_url();?>assets/bootstrap/3.3.6/js/bootstrap.min.js"></script> This will include resources located within assets directory of your installation. Note that these need to be download to the same directory as your index.php file and their location will be relative to the index.php file location.
This concludes section for including bootstrap framework (and some part of layout) within the codeigniter. Now we will move to creating other parts of layout within the bootstrap framework.
Create other parts of layout and call them from controller
Now create 3 more files bs_body.php , bs_header.php (optional) and bs_footer.php (optional) within your view folder. Put below content if you want or you can include your own content as per application needs.
Now we will call them from controller, lets say bootstrap. If you do not have a controller calling your view files already, create a controller bootstrap.php and copy below code:
Lets see how it works now:
- You go to url
/bootstrapon your application.
bs_bodyneeds to be called from this controller. We include this as variable name in the variable
$data_bs['body']and then load layout using
- Within layout file demo/bs_layout :
<?php $this->load->view('demo/bs_header') ; ?>will load the header.
<?php $this->load->view($body); ?>will load the body content from
demo/bs_bodysince it has been called dynamically from controller with variable name
$data_bs['body']. You can have multiple files for body or any other content and call them using variables.
<?php $this->load->view('demo/bs_footer');?>will load footer.
- Including header and footer is completely optional and you can skip them if not needed. In that case , do not create header and footer files and remove their reference from the layout.
That’s it. Your new layout with Twitter bootstrap RWD framework is integrated with codeigniter and ready to use.
Any questions or comments, leave a comment below.
- http://getbootstrap.com/components/ for further reference on framework and different options e.g. glyphicons.
- w3schools resources
- http://www.codeigniter.com/user_guide/ for CI MVC framework documentation.
- http://technology-central.org/category/codeigniter/ for some other CI tutorials.