Layout

Column

One column in a row — every supported width (twelfths, plus the 1/5 fifth).

Live demo

See it in action

1 / 1
1 / 2
1 / 2
1 / 3
1 / 3
1 / 3
1 / 4
1 / 4
1 / 4
1 / 4
1 / 5
1 / 5
1 / 5
1 / 5
1 / 5
1 / 6
1 / 6
1 / 6
1 / 6
1 / 6
1 / 6
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
2 / 3
1 / 3
3 / 4
1 / 4
5 / 12
7 / 12
5 / 6
1 / 6
11 / 12
1 / 12

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section>
	<div class="fw-container">
		<div class="fw-row">
			<div class="fw-col-12 fw-col-sm-4">
				<p>Column (1/3)</p>
			</div>
			<div class="fw-col-12 fw-col-sm-4">
				<p>Column (1/3)</p>
			</div>
			<div class="fw-col-12 fw-col-sm-4">
				<p>Column (1/3)</p>
			</div>
		</div>
	</div>
</section>

To learn more about the Column shortcode, please check out the online manual here.

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free