Bootstrap Grid System, Full details of Bootstrap Grid System

Bootstrap Tutorial

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-2

.col-md-3

.col-md-4

.col-md-5

.col-md-7

.col-md-6

.col-md-7

.col-md-5

.col-md-8

.col-md-4

.col-md-8

.col-md-12

Desktops and Mobiles Grid System

.col-md-3 .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-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

Bootstrap Tutorial

WEB DEVELOPMENT TUTORIALS

S/W RELATED LINKS

COMPETITIVE EXAMS

We see you’re using an ad blocker.