Layout

Bleed Section

A split band: content one side, a full-bleed image the other.

Live demo

See it in action

Bleed Section

Content one side, a full-bleed image the other.

The image runs to the edge of the viewport while the content keeps the readable container width.

Get started

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="bleed-section__img" style="right:0;width:41.6667%;">
		<img width="900" height="1100" src="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-adce8614d3c7.jpg" class="bleed-section__image" alt="" style="object-position:center;" sizes="(max-width: 767.98px) 100vw, 41.6667vw" decoding="async" loading="eager" fetchpriority="high" />
	</div>
	<div class="fw-container bleed-section__container">
		<div class="fw-row">
			<div class="fw-col-md-7 bleed-section__content" style="display:flex;flex-direction:column;justify-content:center;padding-top:3rem;padding-bottom:3rem;">
				<div class="fw-row">
					<div class="fw-col-12">
						<p class="heading-overline heading-overline--kicker text-start">Bleed Section</p>
						<h2 class="heading-title text-start">Content one side, a full-bleed image the other.</h2>
						<p class="heading-subtitle text-start">The image runs to the edge of the viewport while the content keeps the readable container width.</p>
						<a href="#" target="_self" class="btn btn-primary btn-lg btn-a34f2d84"> Get started<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width=".7em" height=".7em" style="vertical-align:middle;margin-left:.4em"><path d="M5 12h14M12 5l7 7-7 7" /></svg></a>
					</div>
				</div>
			</div>
			<div class="fw-col-md-5 bleed-section__spacer" aria-hidden="true">
			</div>
		</div>
	</div>
</section>

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