Learn How To Integrate Bootstrap 4 in Codeigniter

0
150
Integrate Bootstrap-4

Today, we are going to learn how to integrate Integrate Bootstrap-4 in CodeIgniter. Some people are facing a problem with bootstrap configuration, as they are not being able to integrate the bootstrap style while coding because of the tricky configuration of Bootstrap. In this article, we will explain in detail how to manage the configuration of Bootstrap with CodeIgniter in detail. After configuration, we can develop any web application using the CodeIgniter framework. We hope this article helps people learn how to use bootstrap within the CodeIgniter framework.

Before we start building the application, we need to download XAMPP, and setup CodeIgniter on your system. You can do that using the points below:

1) Install XAMPP on your system. XAMPP is a PHP development environment. You can download and install XAMPP from https://www.apachefriends.org/index.html

2) Now, you need to setup the current version of CodeIgniter. Download the CodeIgniter framework from “https://codeigniter.com/download”. Go to htdocs folder, create a folder with a name CodeIgniter in “C:\xampp\htdocs” location and extract all the files in this CodeIgniter folder.

To test the CodeIgniter setup, start Apache and MYSQL services and go to http://localhost/codeigniter, where you will see that CodeIgniter is running.

Now, you can create own message for your application by editing the application/views/welcome_message.php file. Check the screenshot below to help you.
Welcome
3) Remove the index.php file from the URL in CodeIgniter

To change the configuration of CodeIgniter, go to C:\xampp\htdocs\codeigniter folder and create a file with .htaccess extension and add the code below.

4) Download Bootstrap 4 from https://getbootstrap.com/ and extract the folder. You will see the JS and CSS file in the bootstrap folder. In this article, we are going to use the Bootstrap 4 example from https://getbootstrap.com/docs/4.1/examples/starter-template/.

5) Go to the CodeIgniter folder, which is located in “C:\xampp\htdocs” folder and create a folder with a name “assets” and move all CSS and JS folders from the extracted Bootstrap 4 folder to the assets folder.

Create a controller:

Now we are going to create multiple pages in the application, so there is no need to create a separate controller for each individual page. We are creating a single controller for multiple pages. We used the if statement to check if the page exists or not in the controller.

Go to the controller folder and create the pages.php file and add the following code:

Create view

Let’s create static pages in the View. Go to the “C:\xampp\htdocs\codeigniter\application\views” folder and create a folder with a name “Pages”. We are using the bootstrap example to create static pages in views.
Please refer to the starter template from https://getbootstrap.com/docs/4.1/examples/starter-template/.

Inside the pages folder, create the home.php file, about.php file, and contact.php file and add the codes given below:

a) Add code in home.php file:

b) Add code in the about.php file:

c) Add code in the contact.php file

In this project, we added the Bootstrap CSS and JS file inside the assets folder and we have given a link for the CSS and JS file in the static pages as per given below.

Create Routes:

On localhost, we are writing http://localhost/codeigniter/pages/view to access view files, which are calling the pages object and view functions from the pages.php controller.

To make a change in the URL. Open a “routes.php” file, which is located in the “C:\xampp\htdocs\codeigniter\application\config” folder.

Change the default controller and add routes for any pages by adding the following lines:

And now you can can use the following URLs
http://localhost/codeigniter/home,
http://localhost/codeigniter/about,
http://localhost/codeigniter/contact,

Go To localhost and open the home, about and contact pages by using the above URL.
Please check the screenshot below to help you use Bootstrap in CodeIgniter.
Welcome_Homepage
screenshot contact

LEAVE A REPLY

Please enter your comment!
Please enter your name here