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 |
<!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>
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.