Learn How To Integrate Bootstrap 4 in Codeigniter

7
2855
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

7 COMMENTS

  1. This is a mess it doesn’t work!!

    Also very odd that there are NO comments! Why? Youi keep deleting them because they are like mine?

  2. Hello
    first of all, thank you for this tutorial

    maybe you can kindly hint

    I have setup xampp and copied codeigniter 3.1 tree into /htdocs/codeingiter directory

    then followed the tutorial

    for some reason If I open
    http://localhost/codeigniter
    the home page with all the bootstrap css appearance is shown

    but if I open
    http://localhost/codeigniter/home
    http://localhost/codeigniter/about
    http://localhost/codeigniter/contact

    I get 404 error

    the pages.php controller is named lower case
    the /pages directory inside the /views directory is lower case

    my routes.php is

    $route[‘(:any)’] = ‘pages/view/$1’;
    $route[‘default_controller’] = ‘pages/view’;
    $route[‘404_override’] = ”;
    $route[‘translate_uri_dashes’] = FALSE;

    thank you

  3. The tutorial worked for me. Make sure you are using relative paths when making references. Check that your assets folder sits where it is supposed to site.

    Smile 🙂 it’s never that serious

  4. when I get 404 error. In my case, I have changed my controller name pages to Pages (starting with upper case) then it works fine.

LEAVE A REPLY

Please enter your comment!
Please enter your name here