CODEWITHSUNDEEP
csstwitter-bootstrapcontainersmultiple-columns
nickfindley
nickfindley

Reputation: 310

Bootstrap: One column extending beyond fixed-width container?

Using Bootstrap 4. I have a site using a fixed-width container. On some pages I would like the left portion of a row to contain only an image (img tag or background on a div, I'm not particular at this point) and I want that image to extend out of the fixed-width container to the edge of the window. The right portion is text that I want to keep within the container.

Hopefully this image explains it:

enter image description here

Can it be done?

Upvotes: 0

Views: 294

Answers (1)

nickfindley
nickfindley

Reputation: 310

I think I got it, approximately:

.left-bleed {
    margin-left: calc(-100vw / 2);
}

<figure class="left-bleed">
    <img src="https://source.unsplash.com/KUfkX6gVwBU/2600x800">
</figure>

This will pull the image beyond the container and to the left edge of the viewport.

Helpful sources:

https://css-tricks.com/full-width-containers-limited-width-parents/ https://codepen.io/mor10/pen/baYLEB

Upvotes: 1

Related Questions