Bootstrap Grid Example and Customize Its Layout Using CSS : Part-3

In this tutorial i will explain you the bootstrap gird layout system and how we can customize it for more dynamic and flexible layouts using CSS. The Bootstrap grid system has four classes:
  • xs (for phones)
  • sm (for tablets)
  • md (for laptops/desktop)
  • lg (for larger screen)

The classes above can be combined to create more dynamic and flexible layouts.
  1. Right click on the views folder and create a new php file with name index.php.
  2. Right click on the controller folder and create a new Php Class file with name Example1 shown below.
Grid System in Bootstrap and Customize It For More Dynamic and Flexible Layouts
Grid System in Bootstrap and Customize It For More Dynamic and Flexible Layouts -1

Click on Ok Button and write code shown in the image in your controller Example1.php file.

Related Articles:
1. Learn PHP CodeIgniter framework using Ajax & Bootstrap : Part 1. 
2. PHP MySQL Web Development Using CodeIgniter & Bootstrap : Part 2.

Grid System in Bootstrap and Customize It For More Dynamic and Flexible Layouts
Grid System in Bootstrap and Customize It For More Dynamic and Flexible Layouts -2

    3. Now goto config folder and open routes.php file in end of this file code written is
    $route['default_controller'] = 'welcome';
    $route['404_override'] = '';
    $route['translate_uri_dashes'] = FALSE;

   You have to just replace the first line by $route['default_controller'] = 'example1';
   
   4. Goto config folder and open config.php file and search $config['base_url'] = ''; replace this line by $config['base_url'] = 'http://localhost/Example1/';
 
   5. Right click on the main folder of your project which is Example1 and create .htaccess file and  paste the below code in .htaccess file
       RewriteEngine On
       RewriteCond %{REQUEST_FILENAME} !-f
       RewriteCond %{REQUEST_FILENAME} !-d
       RewriteRule ^(.*)$ index.php?/$1 [L]


  6. Goto config folder and open autoload.php file and search $autoload['helper'] = array(); and replace this line by $autoload['helper'] = array('url');
  
  7. Download jquery script from https://jquery.com/ here I am using jquery-3.1.1.js version, copy the downloaded jquery file and paste in “js” folder of your project.
  
  8. Complete code of index.php file
 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body style="background-color: whitesmoke">
<div align="center">
   <h2>Example 1</h2>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12" style="background-color: #1b6d85;color: white">
            <h6>Column 1</h6>
            <p>I am column 1</p>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12" style="background-color: #3c763d;color: white">
            <h6>Column 2</h6>
            <p>I am column 2</p>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12" style="background-color: #5a0099;color: white">
            <h6>Column 3</h6>
            <p>I am column 3</p>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12" style="background-color: #8a6d3b;color: white">
            <h6>Column 4</h6>
            <p>I am column 4</p>
        </div>
    </div>
</div>
</body>
</html>


Output:
On Large Device

Grid System in Bootstrap and Customize It For More Dynamic and Flexible Layouts
Grid System in Bootstrap and Customize It For More Dynamic and Flexible Layouts -3

On Medium and Small Device
 
Grid System in Bootstrap and Customize It For More Dynamic and Flexible Layouts
Grid System in Bootstrap and Customize It For More Dynamic and Flexible Layouts -4

On Xtra Small Device xs (Mobile)

Grid System in Bootstrap and Customize It For More Dynamic and Flexible Layouts
Grid System in Bootstrap and Customize It For More Dynamic and Flexible Layouts -5

Note: If we want some margin from left and right then we have to use offset class, for eg. If we want to leave 1 column in left and 1 column in right then use class="col-lg-10 col-lg-offset-1" It means 1+10+1=12 here we leave 1 column space in left and 1 column space in right.

Read More
Previous Page Home Page