CodeIgniter 4 - Work with Bootstrap (Templating and Integrate Bootstrap)
Posted by Ridwan Fadilah on Jun 25, 2020 - 12:29 pm
Learn the basic templating using the MVC concept and Integrating Bootstrap into your CodeIgniter 4 application.
Bootstrap is the most popular CSS Framework and quite easy to use. But, is Bootstrap also easy and can be integrated with CodeIgniter 4? The answer is yes! You can Integrating Bootstrap with CodeIgniter 4 like Integrating theirs with an HTML document.
Here in this tutorial, I'll show you how to Integrate Bootstrap to your CodeIgniter 4 application by using the basic MVC concept.
Why MVC?
By using the MVC concept, you don't need to rewrite the same code on another page if you want to use the same element. For example, you have a navbar, and you want to display it on all pages of your web. You don't need to rewrite or copy your code and place it on another page.
Integrating Bootstrap
It's so simple to Integrate Bootstrap with CodeIgniter 4. You can use the baseURL() function. But, be sure you have set your baseURL. In this CodeIgniter version, you also no need to load the helper('url'). The helper('url') is autoloaded by default.
You can read the tutorial about How to set the default page and base URL, or the Environment Variables tutorial.
In your root directory, create a new folder, for example, the "assets" folder. Place all file and Bootstrap folder (CSS, js folder.) into the assets folder. Now, you can call the file in the head or footer section (usually for script) by using this following syntax:
Make a Simple Template for CodeIgniter 4
Usually, we have some sections in a document consisting of the header, topbar, sidebar, main content, and a footer section. Make the sections into different files.
Example:
- Place the header or head element into the header.php file.
- Place the "topbar" or navbar into the topbar.php file.
- Place the sidebar (if contained) into the sidebar.php file.
- Place the footer into the footer.php file.
- Just forget the main content, because every page will have different content.
Place in the view>templates folder:
|__[Views]
|____[templates]
|______footer.php
|______header.php
|______topbar.php
Now to call the templates, you must set it in your controller. Before that, be sure you have created the main view for the main content.
Example:
Main View<div class="container">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</div>
namespace App\Controllers;
use App\Models\Home_model;
class Home extends BaseController
{
public function index()
{
$data['pageTitle'] = 'CI-4 | Home';
echo view('templates/header', $data);
echo view('templates/topbar');
echo view('home/index', $data);
echo view('templates/footer');
}
}
The home/index is the folder and file of the main content.
Result:
Okay, that's the tutorial about How to Integrating Bootstrap in CodeIgniter 4. If you can't understand this tutorial article, you can see the tutorial about these examples on our YouTube Channel.
If you want to learn more about CodeIgniter 4, you can see the related article below.
Thanks for reading this tutorial.