add this to headers
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
container class should be added to the root element where you would like to use bootstrap.
container-fluid is for full-width container.
from the official documentation:
- Content should be placed within columns, and only columns may be immediate children of rows.
- Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on
- Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. grid classes are
|Container width||None (auto)||750px||970px||1170px|
The gutter width for bootstrap is
15px for each column,
generally, you should use the
col-sm-N family of classes. such that it applies for all devices except phones.
col-xs-offset-* classes to offset the columns.
col-xs-pull-* classes to pull column to left, and
push to push to right.
from here: https://getbootstrap.com/css/#type