Use bootstrap in Codeigniter or any website can be done in many ways. But I will teach you the best way to use Bootstrap in Codeigniter or Any PHP Website. Let’s First understand What Bootstrap is and why we need it? Bootstrap is a CSS & Javascript framework which is created by responsive design in mind. Creating responsive design is never been so easier before. With Bootstrap we can create responsive website from scratch in no time. Let’s first Download Bootstrap.
Download Bootstrap
Let’s download bootstrap from bootstrap official website. In download section of bootstrap site, there are 3 options to download boostrap.
- Download Bootstrap (Simple way to get required CSS & js files for Bootstrap integration)
- Download Source (Best method to Bootstrap Integration with Codeigniter)
- Download Sass (Best suited for Rails environment for bootstrap integration)
Click on download source to get required files to configure bootstrap. when download finished extract files and place less directory at safe place on your hard drive. We will use same directory for bootstrap integration with every website that requires it. So basically outside project directory.
Download Required Software for use Bootstrap in codeigniter or any website
For Mac users download CodeKit which is preferred and for Windows Users preferred software is PrePros. This software will compile your Bootstrap less files and generate desired CSS files so that it can be used in your project/website. I will show this for MAC users and in our next article we will explain this for Windows Users.
Now Open CodeKit & go to file > Add Framework option. select LESS directory that we put in safe place. and click Add. Now Bootstrap Framework is added to CodeKit. We are ready to configure our Bootstrap in Codeigniter or any other website. You can follow same steps for any Website.
Use bootstrap in Codeigniter or Any Website
Inside Codekit navigate to menu option File > Add Project and locate your project directory and click on Add. Now Codekit will automatically identifies css & js inside project directory and make necessary assumptions and settings automatically. Create a less directory in your website and create a blank file style.less. If you refresh codekit project that file is listed in Codekit. In Codekit right click on style.less file and specify output path to .css file for your website. Now Remember Codekit will overwrite .css file so be careful. I set output location to public/css/style.css. In right sidebar set options for compilation of less file to (output style) minified. Which creates compact css files.
Place Required files in your websites for Bootstrap in codeigniter or any website.
Find Variables.less file in bootstrap source files and place it where style.less file is located. Now place 2 lines in your style.less file.
|
1 2 |
@import 'bootstrap.less'; @import '../less/variables.less'; |
Make sure your codekit is running in background. Now as soon as you save style.less file codekit will generate style.css file based on style.less settings. Just open your style.css file and see you will find bunch of css codes from bootstrap. Now add style.css file link to your website and you are done. You can add as many css rules as you like inside style.less file and all those are compiled and minified into style.css automatically by codekit.
Wherever you want to integrate bootstrap just add link to style.css file as below.
|
1 2 3 4 5 |
<head> ... <link href="<?= base_url(); ?>public/css/style.css" rel="stylesheet"> ... </head> |
base_url is a function in codeigniter. you can modify it as needed. Thats all we have to do to configure Bootstrap. Now I know that this can be done without CodeKit or any other software. But with CodeKit we will get dynamic Bootstrap Code Generation based on less settings. We get minified css which is great for increasing performance of website. Let’s see an example of dynamic Bootstrap Settings.
Dynamic Bootstrap Settings
Write following code inside style.less file to modify some bootstrap variables.
|
1 2 3 4 5 6 7 8 9 10 |
@import 'bootstrap.less'; @import '../less/variables.less'; @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(//ssl.gstatic.com/fonts/roboto/v10/grlryt2bdKIyfMSOhzd1eA.woff) format('woff'); } @font-family-sans-serif: 'Roboto','Helvetica Neue'; |
As soon as you save less file codekit will identify this settings and generate css file based on what have configured in less file. In above example we have configured font-family-sans-serif variable which used by bootstrap for font-family. we can configure lots of variables that is used by bootstrap in same way. Here is bootstrap documentation for all those variables. Just look for Less Variables Section.
I hope you like this explanation. For Windows users, i will put similar article in short time. Visit our FB Fan Page to get instant updates on CodeRiddles.
Bookmark Link using: 
