Use rows and columns to create a grid of a specific size and add data to it. Here are a few guidelines to keep in mind:
- Place rows in a
.container(fixed-width)or.container-fluid(full-width)methods for accurate alignment. - Horizontal groups of columns can be created using rows. Insert data in columns, and only columns may be immediate children of rows.
Padding is used by columns for creating gutters. That cushioning is counterbalanced in lines for the first and the last section by means of negative edge on .lines. Initiate columns by specifying the number columns. Not more than 12 columns can be initiated in a row, all extra columns will jump on a new line. Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and overrides grid classes targeted at smaller devices.
The following table shows some effective ways in which the Bootstrap grid system can be used to work for multiple devices:
|
Large Device (>=1200 px)s |
Medium Devices (>=992 px) |
Small Devices such as Tablets (>=768px) |
Extra small devices such as Phones (<768px) | |
|---|---|---|---|---|
|
Grid behavior |
Collapsed to start, horizontal above breakpoints |
Horizontal at all times | ||
|
Max container width |
1170px |
970px |
750px |
None (auto) |
|
Class prefix |
|
|
|
|
|
# of columns |
12 | |||
|
Max column width |
95px |
78px |
60px |
Auto |
|
Gutter width |
350px (15px on each side of a column) | |||
|
Nestable |
Yes | |||
|
Offsets |
Yes | |||
|
Column ordering |
Yes | |||
source: www.getbootstrap.com/css/
Media queries help the website to adjust the styles according to the screen size. We can use the media queries in our LESS files in order to create the key breakpoints in our grid system. Observing the cheat sheet, we can write media queries. Let's take a look at the following code snippet:
/* Large Device (>=1200 px) */
@media (min-width: @screen-lg-min) { ... }
/*Medium Devices (>=992 px)*/
@media (min-width: @screen-md-min) { ... }
/* Small Devices such as Tablets (>=768px) */
@media (min-width: @screen-sm-min) { ... }
/* Extra small devices such as Phones (<768px)*/
/* No media query as this is the default*/We occasionally expand on these media queries to include a max width to limit CSS to a narrower set of devices:
/* Large Device (>=1200 px) */
@media (min-width: @screen-lg-min) { ... }
/*Medium Devices (>=992 px)*/
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
/* Small Devices such as Tablets (>=768px) */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
/* Extra small devices such as Phones (<768px)*/
@media (max-width: @screen-xs-max) { ... }We need these types of columns because sometimes in a grid, not all the columns end with the same alignment due to a varying amount of data in it. However, responsive columns will ensure that everything is perfectly aligned. Let's take a look at the following code snippet:
<div class="row"> <div class="col-xs-6 col-sm-3" style="background-color:pink">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3" style="background-color:brown;">.col-xs-6 .col-sm-3</div></div> <!-- Add the extra clearfix for only the required viewport --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3" style="background-color:orange;>.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3" style="background-color:black;>.col-xs-6 .col-sm-3</div> </div>
Sometimes, we need to place a column or start a column with some free space offset. So, we set an offset from where the column needs to begin:
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>
As the name suggests, nesting columns are an embedment of a column within a column. Let's take a look at the following code snippet:
<div class="row">
<div class="col-md-9">
Level 1: .col-md-9
<div class="row">
<div class="col-md-6">
Level 2: .col-md-6
</div>
<div class="col-md-6">
Level 2: .col-md-6
</div>
</div>
</div>
</div>Column ordering can also be changed by moving columns to right or left. The following code shows how columns can be moved:
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
LESS mixins and variables are used to quickly instantiate a layout using specific values given through variables and mixins.
Mixins are mainly used together with grid variables to provide CSS styles for individual elements.
Mixins, as the name suggests, are a way of including or mixing a group of properties from one rule set into another rule set. The following example shows the make-row() mixin:
make-row (@gutter: grid-gutter-width) {
margin-left : (@gutter / -2);
margin-right : (@gutter/ -2);
&: extend( .clearfix all);
}The make-row() mixin generates styles for the wrapper element, which contains all the columns. It uses the value from the @gutter parameter to calculate the left and right margins for a row.
The media query point from where columns start floating, total number of columns and gutter width are determined by variables. This information is provided by variables in order to generate predefined grid classes and for custom mixins as well.
Variables are used along with mixins to generate styles for individual elements.
The following piece of code predefines some variables that are used in mixins as default values:
//Number of columns in the grid. @grid-columns: 12; //padding between columns. Divided in half for left and right. @grid-gutter-width: 30px; //point at which the navbar collapses. @grid-float-breakpoint: 768px;