Configure Bootstrap in CodeIgniter
Today I came with a very short tutorial on configuring Bootstrap in CodeIgniter. Some people are still not getting Bootstrap styles, when they started coding a project. The reason behind this is the wrong configuration of Bootstrap in CodeIgniter. I will explain clearly how to manage this simple configuration.
- First you need to download CodeIgniter. Visit here to download it. Click on Download CodeIgniter 3.
- Now you need to download Bootstrap. Visit here to download it.
- Extract the both zip files.
- Then create your project folder and move all the files and folders within the CodeIgniter extracted folder to the project folder.
- Create a sub folder called assets or any other name, within the project folder (it is called as assets as a best practice). Now the project folder structure will be like this.
- Now place the folders extracted from Bootstrap zip file, in the assets sub folder included in the project folder. These are the 3 folders.
The final project folder structure will take this format.
Now go to a views folder in CI and create a view with .php extension. Configure the base_url in the config file within the application/config folder. You will use the following format.
$config['base_url'] = 'http://localhost/ProjectFolder';
Then you have to link Bootstrap in the head section of your HTML code part like the same way we use to link bootstrap in normal practice. We'll look at the normal linking according to our file structure.
For Bootstrap CSS files:
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
For Bootstrap JS files:
<script src="assets/js/bootstrap.min.js"></script>
See this link to get an idea of the template for a Bootstrap integrated file.
But when it comes to CI, there's a little change in the linking method! We have to include the base url in the path for CSS and JS files.
For Bootstrap CSS files:
<link href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" rel="stylesheet">
For Bootstrap JS files:
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
Note:
jQuery path will be the same in both ways as it's a CDN fetched through internet to our files.
Example code for a view file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap CI integration</title>
<!-- Bootstrap CSS-->
<link href="<?php echo bas_url(); ?>assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello TechPool!</h1>
<!-- jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap JS-->
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
</body>
</html>
Now copy & paste this code and load your view in the browser. You will definitely see the view file with the Bootstrap styles. If you can not understand whether Bootstrap is configured correctly or not, take a look at this picture. (Same h1 tag is used in two occasions.)
![]() |
- without Bootstrap - |
![]() |
- with Bootstrap - |
You are ready to go with Bootstrap now with the collaboration of CodeIgniter! Hope you will get the idea to configure this setup. If you are still not getting Bootstrap styles, let me know by dropping a comment here.
Good Luck!
14 Comments
Can you explain what are the necessary steps need for Bootstrap CDN?
ReplyDeleteIf you are using CDN, no need to follow these steps since it is directly taken through internet. This is the way how to configure Bootstrap physically. Putting the CDN in a link tag is just enough!
DeleteExcellent blog on Web technology!!! Have gained more information related to website development. Thank admin for this wonderful content.
ReplyDeleteBest web designing institute in chennai
Best web designing course in chennai
It's a pleasure to hear from you..Thank you for your feedback! Keep in touch with TechPool..
DeleteThanx for your feedback! Keep updated with my blog Ranasing!
ReplyDeleteThank You Kate! Such an encouragement!
ReplyDeleteThanks a lot for this blog..... it's really reach.
ReplyDeletei love it
get top shelf buds at buyonlineweeds.com
DeleteI have no word to thanks the team.I am a Bangladeshi and a teacher.Just I pray to God wish the team a good luck.
ReplyDeleteThan You!
DeleteThank You very much!
ReplyDelete
ReplyDeleteThis is an interesting article. It's truly unique I've written. Taking the time to share this informative article.
digital marketing course in hyderabad
Thank you admin for sharing this content with us. I really enjoy to read these kinds of content. It was really awesome and very helpful for all of us. Please keep sharing. Read More
ReplyDeletethank you for sharing..
ReplyDeleteBest Website Development and Hosting in Hyderabad