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.
- Right click on the views folder and create a new php file with name index.php.
- 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 -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.
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 -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';
$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');
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
<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 -3 |
On Medium and
Small Device
 |
| 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 -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.
