Bootstrap Container Shortcode

Donate

Become a backer or sponsor to support our work.

Sponsors

Containers are the most basic layout element in Bootstrap and are required when using our 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.

Usage

1{{% bs/container %}}
2BODY
3{{% /bs/container %}}

Parameters

breakpoint

PositionNameTypeDefaultRequired
#0breakpointstring--

The breakpoint of container.

breakpoint options

sm, md, lg, xl, xxl, fluid

class

PositionNameTypeDefaultRequired
#1classstring--

Used to add extra CSS classes.

Examples

Default container
100% wide until small breakpoint
100% wide until medium breakpoint
100% wide until large breakpoint
100% wide until extra large breakpoint
100% wide until extra extra large breakpoint
100% wide at all breakpoints
 1{{% bs/container  %}}
 2Default container
 3{{% /bs/container %}}
 4
 5{{% bs/container "sm" %}}
 6100% wide until small breakpoint
 7{{% /bs/container %}}
 8
 9{{% bs/container "md" %}}
10100% wide until medium breakpoint
11{{% /bs/container %}}
12
13{{% bs/container "lg" %}}
14100% wide until large breakpoint
15{{% /bs/container %}}
16
17{{% bs/container "xl" %}}
18100% wide until extra large breakpoint
19{{% /bs/container %}}
20
21{{% bs/container "xxl" %}}
22100% wide until extra extra large breakpoint
23{{% /bs/container %}}
24
25{{% bs/container "fluid" %}}
26100% wide at all breakpoints
27{{% /bs/container %}}