Bootstrap Container Shortcode

June 29, 2023 2 min read Shortcode Docs Container

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.

Donate

Become a backer or sponsor to support our work.

On this page

Syntax

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

Parameters

`breakpoint`

Position	Name	Type	Required	Default	Since	Example
`#0`	`breakpoint`	`string`	-	-	-	-

The breakpoint of container: sm, md, lg, xl, xxl, fluid.

`class`

Position	Name	Type	Required	Default	Since	Example
`#1`	`class`	`string`	-	-	-	-

Extra CSS classes.

`bg`

Position	Name	Type	Required	Default	Since	Example
-	`bg`	`string`	-	-	-	-

Background images, supports image resources, public images and external images.

`bgColor`

Position	Name	Type	Required	Default	Since	Example
-	`bgColor`	`string`	-	-	`v0.19.0`	-

Background color.

Examples

Source

 1{{% bs/container class="text-bg-primary text-center py-3 mb-2" %}}
 2Default container
 3{.mb-0}
 4{{% /bs/container %}}
 5
 6{{% bs/container breakpoint="sm" class="text-bg-primary text-center py-3 mb-2" %}}
 7100% wide until small breakpoint
 8{.mb-0}
 9{{% /bs/container %}}
10
11{{% bs/container breakpoint="md" class="text-bg-primary text-center py-3 mb-2" %}}
12100% wide until medium breakpoint
13{.mb-0}
14{{% /bs/container %}}
15
16{{% bs/container breakpoint="lg" class="text-bg-primary text-center py-3 mb-2" %}}
17100% wide until large breakpoint
18{.mb-0}
19{{% /bs/container %}}
20
21{{% bs/container breakpoint="xl" class="text-bg-primary text-center py-3 mb-2" %}}
22100% wide until extra large breakpoint
23{.mb-0}
24{{% /bs/container %}}
25
26{{% bs/container breakpoint="xxl" class="text-bg-primary text-center py-3 mb-2" %}}
27100% wide until extra extra large breakpoint
28{.mb-0}
29{{% /bs/container %}}
30
31{{% bs/container breakpoint="fluid" class="text-bg-primary text-center py-3 mb-2" %}}
32100% wide at all breakpoints
33{.mb-0}
34{{% /bs/container %}}

Result

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

Row

Browse Docs