Layout

Container

A boxed or full-width wrapper that holds columns.

Live demo

See it in action

A boxed container

A .fw-container constrains its content to a centered, readable max-width.

A full-width container

A .fw-container-fluid spans edge to edge — a sibling band, not nested.

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">
				<div class="fw-container fw-container-el">
					<div class="fw-col-12">
						<h3 style="text-align:center;margin:0 0 .35rem">A boxed container</h3>
						<p style="text-align:center;margin:0;color:#5f6266">A <code>.fw-container</code> constrains its content to a centered, readable max-width.</p>
					</div>
				</div>
				<div class="fw-container-fluid fw-container-el">
					<div class="fw-col-12">
						<h3 style="text-align:center;margin:1.5rem 0 .35rem">A full-width container</h3>
						<p style="text-align:center;margin:0;color:#5f6266">A <code>.fw-container-fluid</code> spans edge to edge — a sibling band, not nested.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

To learn more about the Container 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