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.
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.
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:
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 in the view>templates folder:
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 ViewThe 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.