Bootstrap Col Shortcode
Shortcode to generate grid column.
Donate
Become a backer or sponsor to support our work.
On this page
Sponsors
Syntax
1{{% bs/col %}}
2BODY
3{{% /bs/col %}}
Parameters
size
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
#0 | size | string | - | - | - | - |
The space-separated column sizes, in [size] and [breakpoint]:[size] forms, such as 12, 12 md:6 lg:3.
offset
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
#1 | offset | string | - | - | - | - |
The space-separated column offsets, in [offset] and [breakpoint]:[offset] forms, such as 0, 0 md:1 lg:2.
Available options: [size], [breakpoint]-[size].
class
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
#2 | class | string | - | - | - | - |
Extra CSS classes.
Examples
Equal Width Columns Example
Source
1{{% bs/container %}}
2{{% bs/row class="text-center" %}}
3{{% bs/col class="border py-3" %}}Col{{% /bs/col %}}
4{{% bs/col class="border py-3" %}}Col{{% /bs/col %}}
5{{% bs/col class="border py-3" %}}Col{{% /bs/col %}}
6{{% bs/col class="border py-3" %}}Col{{% /bs/col %}}
7{{% /bs/row %}}
8{{% /bs/container %}}Result
Col
Col
Col
Col
Specified Width Columns Example
Source
1{{% bs/container %}}
2{{% bs/row class="text-center" %}}
3{{% bs/col class="border py-3" size="12 md:6 lg:3" %}}Col{{% /bs/col %}}
4{{% bs/col class="border py-3" size="12 md:6 lg:3" %}}Col{{% /bs/col %}}
5{{% bs/col class="border py-3" size="12 md:6 lg:3" %}}Col{{% /bs/col %}}
6{{% bs/col class="border py-3" size="12 md:6 lg:3" %}}Col{{% /bs/col %}}
7{{% /bs/row %}}
8{{% /bs/container %}}Result
Col
Col
Col
Col
Columns Example with Offset
Source
1{{% bs/container %}}
2{{% bs/row class="text-center" %}}
3{{% bs/col class="border py-3" size="6 md:4" %}}Col{{% /bs/col %}}
4{{% bs/col class="border py-3" size="6 md:4" offset="md:4" %}}Col{{% /bs/col %}}
5{{% /bs/row %}}
6{{% /bs/container %}}Result
Col
Col