Containers
Bootstrap containers determine the width of the content area within a given device or viewport.
How they work
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 (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.
DITA Bootstrap comes with three different container styles:
-
container, which sets a
max-widthat each responsive breakpoint -
{breakpoint}:container, which is
width: 100%until the specified breakpoint -
container-fluid, which is
width: 100%at all breakpoints
The table below illustrates how each container’s max-width compares to the original
container and
container-fluid across each breakpoint.
| Extra small
<576px
|
Small
≥576px
|
Medium
≥768px
|
Large
≥992px
|
X-Large
≥1200px
|
XX-Large
≥1400px
|
|
|---|---|---|---|---|---|---|
| container | 100% | 540px | 720px | 960px | 1140px | 1320px |
| sm:container | 100% | 540px | 720px | 960px | 1140px | 1320px |
| md:container | 100% | 100% | 720px | 960px | 1140px | 1320px |
| lg:container | 100% | 100% | 100% | 960px | 1140px | 1320px |
| xl:container | 100% | 100% | 100% | 100% | 1140px | 1320px |
| xxl:container | 100% | 100% | 100% | 100% | 100% | 1320px |
| container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
Note: The DITA Bootstrap plug-in uses the responsive xxl:container by default to fill
the viewport width with page content up to the extra extra large breakpoint. At 1400px or wider, content width is
constrained to 1320px to ensure lines remain readable.
To use different size, pass the desired value to the dita command via the --bootstrap.css.container.size parameter:
dita --input=path/to/your.ditamap \
--format=html5-bootstrap \
--bootstrap.css.container.size=<container-style>