Prev Page
Next Page  
Bootstrap Grid System
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes.

The Bootstrap Grid System allows up to 12 columns across the page. 

Bootstrap includes grid layouts for different types of devices like cell phones, tablets, laptops and desktops, etc. For example, you can use the .col-xs-* (col-xs-12 ) class to create grid columns for extra small devices like cell phones,  the .col-sm-* (col-sm-1  to col-sm-12) class for small screen devices like tablets, the .col-md-*  (col-md-1  to col-md-12) class for medium size devices like desktops and the .col-lg-* (col-lg-1  to col-lg-12) for large desktop screens.

If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:
Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes
Desktops Grid System
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-5
.col-md-7
.col-md-6
.col-md-6
.col-md-7
.col-md-5
.col-md-8
.col-md-4
.col-md-4
.col-md-8
.col-md-12
Desktops and Mobiles Grid System
.col-md-3 .col-xs-6
.col-md-3 .col-xs-6
.col-md-3 .col-xs-6
.col-md-3 .col-xs-6
.col-md-6 .col-xs-6
.col-md-6 .col-xs-6
.col-md-4 .col-xs-12
.col-md-8 .col-xs-12
.col-md-12 .col-xs-12
Desktops, Tablets and Mobiles Grid System
.col-md-4 .col-sm-4 .col-xs-12
.col-md-4 .col-sm-4 .col-xs-12
.col-md-4 .col-sm-4 .col-xs-12
.col-md-6 .col-sm-6 .col-xs-6
.col-md-6 .col-sm-6 .col-xs-6
.col-md-4 .col-sm-4 .col-xs-12
.col-md-8 .col-sm-8 .col-xs-12
.col-md-12 .col-sm-12 .col-xs-12
Example :
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Grid system Program</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<style type="text/css">
.main_header{ 
background:#EEE; c
olor:#000; 
padding:10px 5px; 
margin:0px auto 10px; 
text-align:center; 
font-size:26px;
}
p{ text-align:justify !important;}
</style>
<body>
 
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="main_header">This is Header Part</div>
    </div>
</div>
 
<div class="clearfix"></div>
 
<div class="row">
<!-- Start First Grid -->
<div class="col-md-4 col-sm-4 col-xs-12">
<p>Lorem Ipsum is simply dummy text of the printing 
and typesetting industry. Lorem Ipsum has been the 
industry's standard dummy text ever since the 1500s.
</p>
</div>
    <!-- End First Grid -->
    
    <!-- Start Second Grid -->
<div class="col-md-8 col-sm-8 col-xs-12">
<p>Lorem Ipsum is simply dummy text of the printing and 
typesetting industry. Lorem Ipsum has been the industry's 
standard dummy text ever since the 1500s, when an unknown 
printer took a galley of type and scrambled it to make a 
type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining 
essentially unchanged. 
</p>
    </div>
    <!-- End Second Grid -->
</div>
 
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="main_header">This is Footer Part</div>
    </div>
</div>
 
</body>
</html>
Output :
This is Header Part

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

This is Footer Part
  Prev Page
Next Page