Grid
While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.
See how aspects of the Bootstrap grid system work across multiple devices with a handy table. Bootstrap Grid
| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | |
|---|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| # of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Offsets | Yes | ||||
| Column ordering | Yes | ||||
Containers
Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time). See how aspects of the Bootstrap grid system work across multiple devices with a handy table. Bootstrap Containers
<div class="container"> <!-- Content here --></div>
Use .container-fluid for a full width container, spanning the entire width of the viewport.
<div class="container-fluid"> <!-- Content here --></div>
Use .container-lg-screen inside on .container-fluid for a full extra large width container, spanning the entire width of the viewport.
<divclass="container-lg-screen"> <!-- Content here --></div>