Bootstrap Col Shortcode

June 29, 2023 1 min read Shortcode Docs Col

On this page

Please check out the tutorial to start using Hugo modules.

Learn how to use the col shortcode with handful of options.

Usage

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

Parameters

`size`

Position	Name	Type	Default	Required
`#0`	`size`	`string`	-	-

The column size, multiple sizes separated by a space.

`size` options

[size], [breakpoint]-[size]

`offset`

Position	Name	Type	Default	Required
`#1`	`offset`	`string`	-	-

The column offset, multiple offsets separated by a space.

`offset` options

[size], [breakpoint]-[size]

`class`

Position	Name	Type	Default	Required
`#2`	`class`	`string`	-	-

Used to add extra CSS classes.

Examples

Equal Width Columns Example

Col

1{{% bs/row %}}
2{{% bs/col %}}Col{{% /bs/col %}}
3{{% bs/col %}}Col{{% /bs/col %}}
4{{% bs/col %}}Col{{% /bs/col %}}
5{{% bs/col %}}Col{{% /bs/col %}}
6{{% /bs/row %}}

Specified Width Columns Example

Col

1{{% bs/row %}}
2{{% bs/col size="12 md:6 lg:3" %}}Col{{% /bs/col %}}
3{{% bs/col size="12 md:6 lg:3" %}}Col{{% /bs/col %}}
4{{% bs/col size="12 md:6 lg:3" %}}Col{{% /bs/col %}}
5{{% bs/col size="12 md:6 lg:3" %}}Col{{% /bs/col %}}
6{{% /bs/row %}}

Columns Example with Offset

Col

1{{% bs/row %}}
2{{% bs/col size="6 md:4" %}}Col{{% /bs/col %}}
3{{% bs/col size="6 md:4" offset="md:4" %}}Col{{% /bs/col %}}
4{{% /bs/row %}}

Browser docs