Bootstrap provide Mobile first fluid and responsive grid system that appropriately scales up to 12 columns as the device or view-port size increases.
Example: Creating two columns(of equal width) for medium Sized desktop screen
1) Firstly add the .container class in div which sets maximum width and centring of the layout.
2) After Adding container class, Add another div with .row class. As we know that row in the grid is made up of 12 columns and we are going to create two columns having same width than we have to use .col-md-6 class in both div(Sum of Columns 6+6=12). If we use .col-md-6 class in one div and .col-md-7 in another div than the second div wrap up and come in next row(because here no. of columns in row becomes more than 12 i.e.6+7)
Preview when viewed on Small Devices Tablet:
It provides predefined grid classes for making layouts for different types of devices like phones(<768px), tablet(≥768px), medium sized desktop(≥992px) and large devices(≥200px).
Example: Creating two columns(of equal width) for medium Sized desktop screen
1) Firstly add the .container class in div which sets maximum width and centring of the layout.
2) After Adding container class, Add another div with .row class. As we know that row in the grid is made up of 12 columns and we are going to create two columns having same width than we have to use .col-md-6 class in both div(Sum of Columns 6+6=12). If we use .col-md-6 class in one div and .col-md-7 in another div than the second div wrap up and come in next row(because here no. of columns in row becomes more than 12 i.e.6+7)
<!DOCTYPE html>
<html>
<head>
<title>Grid Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="Stylesheet">
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus tempor eleifend nibh at tristique. In sit amet nibh non dolor tempor
tincidunt. Mauris aliquet, lacus in lobortis pulvinar, ligula augue venenatis
mi, vel adipiscing orci libero ut nisi. Suspendisse lobortis faucibus enim, a
ullamcorper nibh. Aliquam ut diam posuere, ornare augue eget, dignissim massa.
Nullam consectetur fermentum enim sit amet hendrerit. Phasellus commodo ornare
aliquam. Vestibulum odio enim, pretium in velit semper, faucibus egestas nunc.</p></div>
<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus tempor eleifend nibh at tristique. In sit amet nibh non dolor tempor
tincidunt. Mauris aliquet, lacus in lobortis pulvinar, ligula augue venenatis
mi, vel adipiscing orci libero ut nisi. Suspendisse lobortis faucibus enim, a
ullamcorper nibh. Aliquam ut diam posuere, ornare augue eget, dignissim massa.
Nullam consectetur fermentum enim sit amet hendrerit. Phasellus commodo ornare
aliquam. Vestibulum odio enim, pretium in velit semper, faucibus egestas nunc.</p></div>
</div>
</div>
<script js="js/bootstrap.min.js"></script>
</body>
</html>
Preview:
Example: Multiple Grid System
In Multiple grid system, we use two or more than two predefined grid classes for a single div. For easy understanding, we are going to create an example in which we have 3 content boxes(3 div) of same size(33%/33%/33%) for medium sized devices and when we reduce size or access it with Tablet(Small sized device) than our layout changes to 2 div of equal width(i.e.50%) and one with 100% width below the first two div.
In this Example, we take 3 Div with multiple grid system. Here, we set .col-md-4 class for all the 3 div which makes it to be visible side by side and of same width for the medium sized desktop(≥992px) and for small screen devices like tablet we use .col-sm-6 class for first 2 div so that on small devices first two div come along side by side and .col-sm-12 for third div which makes it to take the entire width of the container.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Grid Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="Stylesheet">
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<h3>Example of Multiple grid
System</h3>
<div class="col-sm-6 col-md-4">Some Text here.Some Text here.Some Text here.Some Text
here.Some Text here.Some Text here.Some Text here.</div>
<div class="col-sm-6 col-md-4">Some Text here.Some Text here.Some Text here.Some Text
here.Some Text here.Some Text here.Some Text here.</div>
<div class="col-sm-12 col-md-4">Some Text here.Some Text here.Some Text here.Some Text
here.Some Text here.Some Text here.Some Text here.</div>
</div>
</div>
<script js="js/bootstrap.min.js"></script>
</body>
</html>
Preview for Medium Device desktop:
Preview when viewed on Small Devices Tablet:
Example:Nested Column
For adding Nested column, Add another .row class in the div you want to do partition and then divide the column using .col-md-* as per your need.
<!DOCTYPE html>
<html>
<head>
<title>Grid Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="Stylesheet">
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus tempor eleifend nibh at tristique. In sit
amet nibh non dolor tempor tincidunt. Mauris aliquet, lacus in lobortis
pulvinar, ligula augue venenatis mi, vel adipiscing orci libero ut nisi. Suspendisse
lobortis faucibus enim, a ullamcorper nibh. Aliquam ut diam posuere, ornare
augue eget, dignissim massa. Nullam consectetur fermentum enim sit amet
hendrerit. Phasellus commodo ornare aliquam. Vestibulum odio enim, pretium in
velit semper, faucibus egestas nunc.</p>
<div class="row">
<div class="col-md-6">Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor eleifend nibh
at tristique. In sit amet nibh non dolor tempor tincidunt. Mauris aliquet,
lacus in lobortis pulvinar, ligula augue venenatis mi, vel adipiscing orci
libero ut nisi. Suspendisse lobortis faucibus enim, a ullamcorper nibh.</div>
<div class="col-md-6">Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor eleifend nibh
at tristique. In sit amet nibh non dolor tempor tincidunt. Mauris aliquet,
lacus in lobortis pulvinar, ligula augue venenatis mi, vel adipiscing orci
libero ut nisi. Suspendisse lobortis faucibus enim, a ullamcorper nibh.</div>
</div>
</div>
<div class="col-md-4">Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor eleifend nibh
at tristique. In sit amet nibh non dolor tempor tincidunt. Mauris aliquet,
lacus in lobortis pulvinar, ligula augue venenatis mi, vel adipiscing orci
libero ut nisi. Suspendisse lobortis faucibus enim, a ullamcorper nibh.</div>
</div>
</div>
<script js="js/bootstrap.min.js"></script>
</body>
</html>
Preview:
Offset:
Offset is required for moving columns towards right side using .col-md-offset-* classes here value of * is in between 1 to 11.
<!DOCTYPE html>
<html>
<head>
<title>Grid Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="Stylesheet">
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"><p style="background-color:silver;padding:20px;">.col-md-3</p></div>
<div class="col-md-3"><p style="background-color:silver;padding:20px;">.col-md-3</p></div>
<div class="col-md-3"><p style="background-color:silver;padding:20px;">.col-md-3</p></div>
<div class="col-md-3"><p style="background-color:silver;padding:20px;">.col-md-3</p></div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3"><p style="background-color:silver;padding:20px;">.col-md-3
.col-md-offset-3</p></div>
</div>
<div class="row">
<div class="col-md-5"><p style="background-color:silver;padding:20px;">.col-md-5</p></div>
<div class="col-md-3 col-md-offset-2"><p style="background-color:silver;padding:20px;">.col-md-3
.col-md-offset-2</p></div>
</div>
</div>
<script js="js/bootstrap.min.js"></script>
</body>
</html>
Preview:
Hope you like it. Thanks
[Download Source code from Google Drive]
0 comments:
Post a Comment