Grid
Container
.containerhas a specificmax-widthfor each grid breakpoint (e.g., Atlas 540px wide, 720px wide, 960px wide, and 1248px wide).
| Base | |
|---|---|
| Breakpoint (min-width) | Container (max-width) |
| 576px | 540px |
| 768px | 720px |
| 992px | 960px |
| 1200px | 1140px |
| Atlas | |
|---|---|
| Breakpoint (min-width) | Container (max-width) |
| 576px | 540px |
| 768px | 720px |
| 992px | 960px |
| 1280px | 1248px |
container
Container Fluid
https://getbootstrap.com/docs/4.0/layout/grid/
Use
.container-fluidwith.container-fluid-max-{sm|md|lg|xl}to create fluid containers that don't expand beyond a set width (e.g., For Atlas xl => 1248px).
| Base | |
|---|---|
| Name | Container Fluid (max-width) |
| .container-fluid-max-sm | 540px |
| .container-fluid-max-md | 720px |
| .container-fluid-max-lg | 960px |
| .container-fluid-max-xl | 1140px |
| Atlas | |
|---|---|
| Name | Container Fluid (max-width) |
| .container-fluid-max-sm | 540px |
| .container-fluid-max-md | 720px |
| .container-fluid-max-lg | 960px |
| .container-fluid-max-xl | 1248px |
container-fluid-max-sm
container-fluid-max-md
container-fluid-max-lg
container-fluid-max-xl
Container Form Lg
Use.container-form-lgwith.containeror.container-fluidto properly space between application controls and the form. This class only modifies thepaddingon the container.
If you need additional breakpoints such as
.container-form-{sm|md|xl} you will need to define them yourself.
Form Title
Container View
Use.container-viewwith.containeror.container-fluidto properly space between application controls and view pages (e.g., Card View, Table View, or List View). This class only modifies thepaddingon the container.