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.
2 Comments
All good. I am a newcomer, so I jerked until the money was withdrawn. I waited 2 days on Yandex. Thanks to the admins and support service for listening to my whining on the forum and in the chat. Play people! Do not be greedy. All the rules with this casino! perfect casino slot machine games I often spend my time here
ReplyDeleteMy partner and I stumbled over here different website and thought I might check things out. I like what I see so now I am following you. Look forward to looking at your web page repeatedly. Next page: Best 7 Tips For Encryption Software & Imagine You How To Encrypt A Password For Free Like An Expert.
ReplyDelete