A couple weeks ago, I wrote a CodeIgniter3 tutorial series. In the series, there is no CSS framework integrating into the application. Today, I will share with you how to integrate one of the popular CSS frameworks which are Bootstrap4 into CodeIgniter.
In my CodeIgniter3 tutorial series, the application looks like this.
The template was created by HTML and CSS only. In this post, we will integrate the Bootstrap 4 framework and turn the plain web page to something likes this.
Let’s do this.
What is Bootstrap4 framework
In short, the Bootstrap 4 framework is a pre-built CSS and JavaScript plugins which allows you to use in your projects. It also comes with the responsive grid system, Sass variables and mixins.
CodeIgniter – views folders
For CodeIgniter, it is an MVC pattern application. All the templates must create under the application/views folder.
For the template, I like to separate the header, and footer section and save it into the individual file. To be organized, I will create these sections under the templates folder. Below is an example.
- application/views folder
- templates
- header.php
- footer.php
- templates
All files under the templates folder are global templates. For example, header.php will contain the Navbar menu while footer.php will contain the copyright text. The header.php and footer.php will be includes in every web page. So in your controller, you will load the view files as below.
<?php
class News extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->model('news_model');
$this->load->helper('url_helper');
$this->output->enable_profiler(TRUE);
}
public function index()
{
$data['news'] = $this->news_model->get_news();
$data['title'] = 'News archive';
// # load the header and fooder templates
$this->load->view('templates/header');
$this->load->view('news/index', $data);
$this->load->view('templates/footer');
}
...Integrate Bootstrap 4 framework
In order to integrate the Bootstrap framework, we will include the Bootstrap style and scripts (optional) into your templates.
Include the Bootstrap style
We will include the Bootstrap style into your header.php. You can copy the CSS link from here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeIgniter | News</title>
<!-- Bootstrap CSS link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
Now, your template is ready to use the pre-built Bootstrap style.
Include the Bootstrap scripts – optional
This is an option. If you want to use the JavaScript plugins from Bootstrap. you can simply include the Bootstrap scripts into your footer.php. You can copy the scripts links from here.
<!-- Bootstrap scripts starts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Bootstrap scripts ends -->
</body>
</html>Now, your application already integrated to pre-built JavaScript plugins from Bootstrap framework.
Add Navbar into our page
Let’s try to add a Navbar menu into you page. We will add some pre-built classes from Bootstrap into your Navbar menu as well.
Open your header.php and add following code under body tag.
<body>
<div style="background:#333333;">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul>
<li><a href="<?= base_url('index.php/news') ?>">Home</a></li>
<li><a href="<?= base_url('index.php/news/create') ?>">Create</a></li>
<li><a href="<?= base_url('index.php/news/reports') ?>">Reports</a></li>
</ul>
</div>
</div>
</div>
</div>
<br>You will notice we have a container class, row class, and col-md-12 class in our Navbar menu. Those are the pre-built classes from Bootstrap. Those classes handle the layout of your web page on all devices (desktop, tablet, and mobile). You can read more about layout classes from Bootstrap here.
And that’s it. It is easy and simple like that.
Bonus – Add some style to make the horizontal menus
From the code above, your Navbar menu will display in a vertical style. To make it a horizontal style, I add my custom style below in the head tag at the header.php.
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
transition: all 0.5s;
}
li a:hover {
color: #ffffff;
text-decoration: none;
background-color: #777777;
}
</style>Now your Navbar menu will look the same as mine (figure: Template with Bootstrap integrated).
For more pre-built style, you can visit this link.
Conclusion
The Bootstrap 4 framework will boost your development. The framework comes with pre-built style and JavaScript plugins. Plus, you can customize the style via Sass variables. The framework works well in CodeIgniter. And it also works well with other PHP frameworks and WordPress. I hope you get the idea of how to integrate the Bootstrap framework to your project and enjoy the benefits from this framework.
