How to add Twitter Bootstrap in PHP CodeIgniter

A fair design is always important to make your codeigniter web application more choiceable to the users. When you are a web developer and looking for creating a fair design, bootstrap is the best choice .Bootstrap framework has a lot of css classes for developing responsive, mobile-first web sites. Codeigniter and twitter bootstrap works together excellently. In this tutorial we will show you how to add twitter bootstrap in your codeigniter web application.

Requirements to Start:

There are three things you need to add Twitter Bootstrap in PHP CodeIgniter:

1. Installation of a localhost server: To start this tutorial you need to install a localhost server in your computer. There are many options on the internet and you can download any of them. We will recommend you to use xampp server. Xampp server is a cross platform server application which will be the most useful for you. 
   
2. Download CodeIgniter: You have to download the codeigniter source file to get you started. If you already have the source file then you can get started with that. If you don't have codeigniter source file then you can download it from their official website - https://www.codeigniter.com/download .You can also Download their Github repository from  - https://github.com/bcit-ci/CodeIgniter .
3. Download Twitter Bootstrap: You need the bootstrap compiled and minified file to get started. If you  have already downloaded bootstrap compiled and minified file then you have no problem to start with that. Other wise you can download the current version of bootstrap from their official website - http://getbootstrap.com/getting-started/#download .By opening this link you will see a button - 'Download Bootstrap'. Click on that button and proceed.

Now follow the bellow mentioned steps to add Twitter Bootstrap in your PHP CodeIgniter web application:

1. Set up of Codeigniter
2. Addition of Bootstrap file On Your Project
3. Creation of Layout Page
4. Link of Bootstrap on Layout Page
5. Addition of HTML
6. Checking of Output

Set up of Codeigniter

In order to add Twitter Bootstrap in your PHP CodeIgniter web application The first step you need to follow is setting up of Codeigniter on your web server or localhost. Set up your base url in 'config.php' file and set up url and file helper in 'autoload.php' file.For this tutorial we will not use any database, so you don't need to configure database. However, if you don't know how to configure base url and helpers in codeigniter you can check the tutorial - How to Install and Configure Codeigniter.

Addition of Bootstrap file On Your Project

Go to the root of your codeigniter project. Create a new folder 'template'. On this 'template' folder you will keep all bootstrap files that you have downloaded from the given link. After extract the bootstrap zip file you will get three folders: css, fonts and javascript. Copy and paste them on 'template' folder that you have created on the root of your codeigniter project.

Creation of Layout Page:

 You have to create a layout page - 'layout.php' in our application >> views folder to write some bootstrap integrated html codes.To make 'layout.php' visible you need to write some functions in your controller. Go to application >> controllers and open 'Welcome.php'. Write the bellow code:

public function layout()
{  
  $this->load->view('layout');
}

Link of Bootstrap on Layout Page:

To link bootstrap stylesheet that you have added on your project, open  'layout.php' from application >> views folder and copy bellow code inside the head section.

<title>Twitter Bootstrap integration on PHP CodeIgniter</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo base_url();?>template/css/bootstrap.min.css">
<script src="<?php echo base_url();?>template/js/bootstrap.min.js"></script>

Addition of HTML:

You need to write some html and bootstrap codes on 'layout.php' to check whether your bootstrap links are working properly or not. Add the bellow code inside  the body tag of 'layout.php'.

<div class="container">
    <div class="row">
      <div class="col-md-4">
        <h3>Responsive Column 1</h3>
        <p>Resize to see the effect</p>
      </div>
      <div class="col-md-4">
        <h3>Responsive Column 2</h3>
        <p>Resize to see the effect</p>
      </div>
      <div class="col-md-4">
        <h3>Responsive Column 3</h3> 
        <p>Resize to see the effect</p>
      </div>
    </div>
  </div>

To minimise your complexity  we have  written bellow the entire code of 'layout.php'. If you feel any trouble to grasp the method You can also write the entire code in 'layout.php' as mentioned bellow .

<html lang="en">
<head>
  <title>Twitter Bootstrap integration on PHP CodeIgniter</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="<?php echo base_url();?>template/css/bootstrap.min.css">
  <script src="<?php echo base_url();?>template/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h3>Responsive Column 1</h3>
        <p>Resize to see the effect</p>
      </div>
      <div class="col-md-4">
        <h3>Responsive Column 2</h3>
        <p>Resize to see the effect</p>
      </div>
      <div class="col-md-4">
        <h3>Responsive Column 3</h3> 
        <p>Resize to see the effect</p>
      </div>
    </div>
  </div>
</body>
</html>

Checking of Output

Open layout page from any browser to check if bootstrap style is added with codeigniter or not. If you see something like bellow it happens that you have added successfully the Twitter Bootstrap in PHP CodeIgniter.

Now resize your browser to see the responsive effects.

So these are the 6 simple steps to add Twitter Bootstrap in PHP CodeIgniter. If you need any further assistance you can freely comment bellow.We love helping our viewers to solve their problems.

We hope our tutorial on 'How to add Twitter Bootstrap in PHP CodeIgniter' will help you design great applications. If you liked this article, then please subscribe our newsletters for daily updates.