Bootstrap3 CSS API Notes - Grid System

Bootstrap3 needs to have <!DOCTYPE html> on top for html5 recogization purpose.

Bootstrap3 has “Mobile first” principle, so <meta name="viewport" content="width=device-width, initial-scale=1"> should be added in <head> tag.

Bootstrap3 requires a container to hold all codes. so make sure add it before insert any more codes. Containers can not be nested:

1
2
3
4
5
6
7
<div class="container">
</div>
<!--Or use this for a full width of device-->
<div class="container-fluid">
<!--container-fluid will create a container that has 100% of viewport-->
</div>

12 content boxes in all devices

mobile deivce has 1 column and 12 rows; tablet has 2 column and 6 rows; desktop has 3 column and 4 rows; large desktop has 4 column and 3 rows

If col-md-* is different for each column, .clearfix help with reduce visible block to make sure 12 column grid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--First two lines has total grid of 6X2 = 12 grids, so use clearfix for next line. This row will have two equal width column-->
<div class="row">
<div class="col-md-6"><p>Box</p></div>
<div class="col-md-6"><p>Box</p></div>
<div class="clearfix visible-md-block"></div>
</div>
<!--First two lines has total grid of 4X3 = 12 grids, so use clearfix for next line. This row will have three equal width column-->
<div class="row">
<div class="col-md-4"><p>Box</p></div>
<div class="col-md-4"><p>Box</p></div>
<div class="col-md-4"><p>Box</p></div>
<div class="clearfix visible-md-block"></div>
</div>

Responsive utility class .visible-md/xs/sm/lg-block make .clearfix effectly only in special scale device. For example, if .visible-xs-block this block will only be viewed on xs device(phone)

As a conclution, The way clearfix visilbel-xs/sm/md/lg work is everytime when a 12 grid appears, a clearfix visible-XX-block without any content needs to appear. For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 1</p></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 2</p></div>
<div class="clearfix visible-sm-block"></div>
<!--There are 6*2=12 grids already, insert a clearfix with sm-->
</div>
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 3</p></div>
<div class="clearfix visible-md-block"></div>
<!--There are 4*3=12 grids already, insert a clearfix with md -->
</div>
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 4</p></div>
<div class="clearfix visible-sm-block"></div>
<!--Another 6*2 appears, so insert another clearfix with sm-->
</div>
<div class="row">
<div class="clearfix visible-lg-block"></div>
<!--There are 3*4 grid, so use clearfix with large-->
</div>

xs: less than 768px; sm: 768 to 992; md: 992 to 1200; lg: larger than 1200

Similar as visible, there are .hiddle-xs, .hidden-sm .hidden-md and .hidden-lg, hide in special scale

Similarly there is print class: .visible-print-block: when print, hide block elements; .visilble-print-inline/.visible-print-block: hide inline/inline-block in print; .hiddle-print: hide elements in print

The gap between columns is adjusted by padding.

If more than 12 columns in a row, extra columns will be put to new line as one unit.

If there is no col-lg-, then styles that apply to col-md- will also affect page on large device.

Place grid columns in any class="row":

1
2
3
4
5
<div class="container-fluid">
<div class="row">
...
</div>
</div>

.col-md-offset-* can be used to move columns to the right. * is how many columns this column moves:

1
2
3
4
5
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 col-md-offset-4"></div>
<!-- last column will move to right, starting from the 9th column -->
</div>

It is safe to use nested column. But make sure class="row" is added to nested part.