Configure Bootstrap in CodeIgniter

by Salitha Chathuranga October 21, 2017 14 Comments


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









  1. UnknownNovember 20, 2017 at 12:26 PM
    Can you explain what are the necessary steps need for Bootstrap CDN?  
    ReplyDelete
    Replies
    1. Salitha ChathurangaNovember 21, 2017 at 10:47 AM
      If 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!
      Delete
  2. Ishu SathyaMarch 3, 2018 at 4:34 PM
    Excellent blog on Web technology!!! Have gained more information related to website development. Thank admin for this wonderful content.
    Best web designing institute in chennai
    Best web designing course in chennai
    ReplyDelete
    Replies
    1. Salitha ChathurangaMarch 3, 2018 at 7:14 PM
      It's a pleasure to hear from you..Thank you for your feedback! Keep in touch with TechPool..
      Delete
  3. Salitha ChathurangaSeptember 9, 2018 at 8:56 AM
    Thanx for your feedback! Keep updated with my blog Ranasing!
    ReplyDelete
  4. Salitha ChathurangaDecember 30, 2018 at 6:27 AM
    Thank You Kate! Such an encouragement!
    ReplyDelete
  5. UnknownJanuary 30, 2019 at 3:26 PM
    Thanks a lot for this blog.....  it's really reach.
    i love it
    ReplyDelete
  6. UnknownJune 17, 2019 at 3:45 PM
    I 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.
    ReplyDelete
  7. Salitha ChathurangaJuly 3, 2019 at 12:53 AM
    Thank You very much!
    ReplyDelete
  8. pujari ashwiniSeptember 16, 2021 at 6:57 PM

    This is an interesting article. It's truly unique I've written. Taking the time to share this informative article.

    digital marketing course in hyderabad
    ReplyDelete
  9. Digital Wheels IndiaMarch 26, 2022 at 1:32 PM
    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
    ReplyDelete
  10. monicaAugust 20, 2022 at 12:17 PM
    thank you for sharing..
     Best Website Development and Hosting in Hyderabad 
    ReplyDelete