Creating a full bleed CSS utility


Break out of the mould of your fixed-width container to create visual interest.

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” utility permalink

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

Code language
.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 Andy Bell (@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 works permalink

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 up permalink

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.

Hello, I’m Andy and I’ll help you to level up your front-end development skills.

I'm a designer and front-end developer who has worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.

On Piccalilli, I share my knowledge and experience to make you a better front-end developer.

I'm the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. Check out what we're all about.