Bootstrap is one of the most popular front-end frameworks. In this blog post, I will be discussing one of the most important concepts in Bootstrap: The Grid System.
In web design, grids organise and structure content, and make the websites easy to scan.
Bootstrap's grid system is responsive and mobile-first. The columns will re-arrange themselves according to the screen size. Bootstrap allows us to create up to 12 columns with unlimited rows— thus the name 12-Grid System.
Grid System is made up of 3 things:
- Container : A container is required to hold rows and columns. It acts like a wrapper. A container is a
<div> element with a class .container. The container is used to give proper width for the layout of the web page. It has different widths in different sized screens .
|
DEVICE WIDTH
|
CONTAINER WIDTH
|
|
1200px or higher
|
1170px
|
|
992px to 1199px
|
970px
|
|
768px to 991px
|
750px
|
|
Less than 768px
|
auto
|
- Rows : The row acts as a wrapper to the columns. A row is also a simple
<div> element with a class .row inside a container. A row movess from the left edge to the right edge of the container. Rows have a 15px of negative margin on each side. There’s no limit on the number of rows you want to create.
-
xs (extra small screens like smartphones)
-
sm (small screen devices like tablets)
-
md (medium sized screens such as desktops and laptops)
-
lg (large and high resolution screens)
These classes can also be combined to create more dynamic and more flexible layouts.
|
CLASS PREFIX
|
DEVICE WIDTH
|
|
.col-xs-
|
<768px
|
|
.col-sm-
|
768px to 991px
|
|
.col-md-
|
992px to 1199px
|
|
.col-lg-
|
≥ 1200px
|
Here's the working of the Bootstrap grid system −
-
Rows to be placed within a .container (fluid or fixed) class for proper alignment and padding.
-
Rows to be used to create horizontal groups of columns.
-
Only columns are to be the immediate children of rows and content is to be placed inside these columns.
-
Predefined classes (mentioned above) are available for making quick and responsive layouts.
-
Grid columns are to be created by spanning the specified number of columns out of 12 total available columns. For example, four equal columns would use four .col-xs-3.
I am providing a sample code snippet for better understanding.
HTML :
<!DOCTYPE html>
<head>
<title>Bootstrap 3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h4>Extra Small Columns</h4>
</div>
</div>
<div class="row">
<div class="col-xs-6 first"></div>
<div class="col-xs-6 second"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h4>Small Columns</h4>
</div>
</div>
<div class="row">
<div class="col-sm-6 first"></div>
<div class="col-sm-6 second"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h4>Medium Columns</h4>
</div>
</div>
<div class="row">
<div class="col-md-6 first"></div>
<div class="col-md-6 second"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h4>Large Columns</h4>
</div>
</div>
<div class="row">
<div class="col-lg-6 first"></div>
<div class="col-lg-6 second"></div>
</div>
</div>
</body>
</html>
CSS :
.first{
background-color: #EA8428;
height: 50px;
}
.second{
background-color: #A6BA5A;
height: 50px;
}
Keep Coding. :)
0 Comment(s)