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:

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

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

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!

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.