Creating a full bleed CSS utility

Sometimes you want your component to break out of the constraints that it finds itself in. A common situation where this might occur is when you don’t have much control of the container that it exists in, such as a CMS template or third-party plugin.

This is even more the case with editing tools such as the WordPress Gutenberg editor, where you could pull any block from a vast array of options. In these situations, it can be pretty darn handy to have a little utility that makes your component 100% of the viewport’s width and still maintain its flow within its parent container.

In this tutorial, we’re going to do exactly that by creating a reusable utility class, so let’s get stuck in.

The “full bleed” utilitypermalink

It’s a small utility class that does one job and does it well. First up, here’s the code:

Code languagecss

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

Tiny, right? Check out this CodePen demo, to see it in action:

See the Pen Piccalilli Demo - Full Bleed Utility by piccalilli (@piccalilli) on CodePen.

The “full-bleed” utility, in this context, helps to give those elements content visual prominence and importantly keeps their place in the page’s overall flow.

How the “full-bleed” utility workspermalink

We set the utility’s width to be 100vw, which equates to the full viewport width. We couldn’t set the width to be 100% because it would only fill the space of its parent element, rendering it useless.

The parent element’s width is useful though, because by setting the utility’s margin-left to 50%, we are telling the component to align its left edge to the center of its parent element, because by doing this, we are setting the left margin to be half of the parent element’s width.

Finally, we use calc to remove 50vw from that 50% margin value. Remember: 50vw equates to half of the window width. This is how it sits in the middle of the container, because that accurate, now negative margin is calculated and applied. CSS maths magic!

Because we are setting the utility’s width to 100vw, there’s a chance that you’re going to get horizontal scrollbars—especially on Windows.

The way I combat this is setting the following on the body element:

Code languagecss

body {
  overflow-x: hidden;
}

This hides overflow content, which in turn, prevents those scrollbars. This technique is sometimes scoffed at, but I think it works great if you think of your body element as a canvas, much like a print canvas.

In print, we have bleed, which is the area beyond the point where the paper gets trimmed. Because of this, print designers (like me, yay) are used to accounting for bleed in our design work. We do this by setting safe area guides.

Each element of the print canvas labelled. Think of the body as the safe area and our full bleed utility going beyond the trim area, into the bleed area.

This approach with the body is pretty much the same as accounting for bleed in print and yep, you guessed it: this is why the utility is named “full bleed”!

Wrapping uppermalink

Hopefully this utility will help you to create some visual interest in your designs.

This site uses the “full bleed” utility to break out portions of the article to catch your attention, which works great. I can dot them around wherever I need them, too. That’s the sort of flexibility that I love.

The “full bleed” utilitypermalink

How the “full-bleed” utility workspermalink

Wrapping uppermalink

Get new articles in your inbox