Bootstrap Container Shortcode
On this page
Please check out the tutorial to
start using Hugo modules.
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
| Position | Name | Type | Default | Required |
|---|---|---|---|---|
#0 | breakpoint | string | - | - |
The breakpoint of container.
breakpoint options
sm, md, lg, xl, xxl, fluid
class
| Position | Name | Type | Default | Required |
|---|---|---|---|---|
#1 | class | string | - | - |
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 %}}