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!
Configure Bootstrap in CodeIgniter
Reviewed by DAL
on
October 20, 2017
Rating:
Reviewed by DAL
on
October 20, 2017
Rating:
No comments: