Responsive web design aims to make web pages render well on a variety of devices and screen sizes to ensure usability. A responsive design adapts the web-page layout to the viewing environment. [1]
Containers are the most basic layout element in Bootstrap and are required when using the default grid system. Containers are used to contain, pad, and center the content within them. While containers can be nested, most layouts do not require a nested container. [2]
The default php implementation for a Bootstrap container is Container. Its constructor takes a single parameter explained in the table below. It is also possible to create a container from anything implementing CssClassifiableContent and ContainerTypeTrait trait.
The hierarchy of a responsive grid is Container Row Column content. On rare occasions content and column may be combined, but then there can be unintended visual consequences. [3]
Bootstrap container implemntations:
The table below illustrates how each container’s max-width compares to the original .container and .container-fluid across each breakpoint. [2]
| Container type | Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
X-Large ≥1200px |
XX-Large ≥1400px |
|---|---|---|---|---|---|---|
| ContainerType::xs | 100% | 540px | 720px | 960px | 1140px | 1320px |
| ContainerType::sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
| ContainerType::md | 100% | 100% | 720px | 960px | 1140px | 1320px |
| ContainerType::lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
| ContainerType::xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
| ContainerType::xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
| ContainerType::fluid | 100% | 100% | 100% | 100% | 100% | 100% |
An offset is used to push columns over for more spacing. To use offsets on large displays, use the .col-md-offset-* classes. [4]
There are two ways to offset columns: responsive .offset- grid classes and margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable. [5]
< 576px Row::xs(), Column::xs()≥576px Row::sm(), Column::sm()≥768px Row::md(), Column::md()≥992px Row::lg(), Column::lg()≥1200px Row::xl(), Column::xl()≥1400px Row::xxl(), Column::xxl()There are two ways to offset columns: responsive .offset- grid classes and margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable. [5]