Layout

Bleed Section

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

Live demo

See it in action

Image right

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 — a CSS-grid split, no Bootstrap row/col classes.

Image left · 6 / 6

Flip the image to the left.

Set Image Side to Left and the split mirrors — an even 6/6 ratio here. Both sides collapse to a single column on mobile.

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="1400" height="1600" src="https://demos.unysonplus.com/wp-content/uploads/2026/09/demo-cf4c5b74aabc.jpg" class="bleed-section__image" alt="" style="object-position:center;" sizes="(max-width: 767.98px) 100vw, 41.6667vw" decoding="async" loading="eager" fetchpriority="high" srcset="https://demos.unysonplus.com/wp-content/uploads/2026/09/demo-cf4c5b74aabc.jpg 1400w, https://demos.unysonplus.com/wp-content/uploads/2026/09/demo-cf4c5b74aabc-263x300.jpg 263w, https://demos.unysonplus.com/wp-content/uploads/2026/09/demo-cf4c5b74aabc-896x1024.jpg 896w, https://demos.unysonplus.com/wp-content/uploads/2026/09/demo-cf4c5b74aabc-768x878.jpg 768w, https://demos.unysonplus.com/wp-content/uploads/2026/09/demo-cf4c5b74aabc-1344x1536.jpg 1344w, https://demos.unysonplus.com/wp-content/uploads/2026/09/demo-cf4c5b74aabc-600x686.jpg 600w, https://demos.unysonplus.com/wp-content/uploads/2026/09/demo-cf4c5b74aabc-219x250.jpg 219w" />
	</div>
	<div class="bleed-section__container">
		<div class="bleed-section__grid" style="--bs-cols:7fr 5fr;">
			<div class="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">
						<div class="heading hd-7b96069c heading-h2 heading--space-tight mb-4">
							<p class="heading-overline heading-overline--kicker text-start">Image right</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 — a CSS-grid split, no Bootstrap row/col classes.</p>
						</div>
						<a href="#" target="_self" class="btn btn-primary btn-lg btn-fe1220e8"> 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="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.