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
Bootstrap3 requires a container to hold all codes. so make sure add it before insert any more codes. Containers can not be nested:
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
Responsive utility class
.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:
xs: less than 768px;
sm: 768 to 992;
md: 992 to 1200;
lg: larger than 1200
Similar as visible, there are
.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
.col-md-offset-* can be used to move columns to the right.
* is how many columns this column moves:
It is safe to use nested column. But make sure
class="row" is added to nested part.