Content

Divider

A horizontal rule or spacer between blocks.

Live demo

See it in action

Standard — solid rule

Gradient fade — tapers at both ends

Ornamental — decorative centered glyph

Inner shadow

With text — an "OR" separator

OR

With text — left aligned title

Section Two

With an icon

Short centered rule — 40% width

Shape — Waves

Shape — Single Wave

Shape — Curve

Shape — Tilt / Diagonal

Shape — Triangle

Shape — Zigzag / Peaks

Shape — Arrow

Whitespace — an invisible 60px vertical gap below this line

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-divider divider-std" style="width: 100%; margin-left: auto; margin-right: auto;">
				</div>
			</div>
		</div>
	</div>
</section>

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