Boostrap : background image in a .container at the very left of the screen

Question

So I'm using bootstrap 4, and have layout which has a container class:

body
  #content.container
    .row
      .col-6
        | Awesome content
      .col-6
        | I like that
    .row
       .col-12 And so on
    .row
       .col-3.here Content with an image
    .row
      .col-12 And so on

Works really well.

But sometimes, my very-competent-but-not-aware-of-technical-contraints designer adds an image at the level of the .here class, but positioned on the left of the screen, which means outside the .container.

The only solution I know for now is to move the .container outside the layout and to repeat it, like so:

body
  #content
    .container
      .row
        .col-6
          | Awesome content
        .col-6
          | I like that
      .row
         .col-12 And so on
    div style="background-image: url(/images/example.jpg);"
      .container
        .row
         .col-3.here Content with an image
    .container
      .row
        .col-12 And so on

This is a pain because it completely breaks factoring, becomes neither DRY, nor responsive.

But do I have a choice?

Of course setting the image position in JS is even uglier. Or setting fixed position of the image isn't a solution either.

But I thought maybe, thanks to flexboxes, it is possible to write something like div.uncontainer style="background-image: url('/images/example')" that would make the div full width, ignoring the .container constraint.

Has anyone the same issue? Is there a clean solution?

Thanks

You mean like this - https://stackoverflow.com/questions/33564131/bootstrap-full-width-with-2-different-backgrounds-and-2-columns — Paulie_D, Aug 22 '19 at 15:07
Interesting, and close to what I am asking, but in their solution, the `.container` class needs to be repeated, so it is close to the solution I have, which is not satisfying enough for me here. — Augustin Riedinger, Aug 22 '19 at 15:12
Or this - https://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen?lq=1 — Paulie_D, Aug 22 '19 at 15:21
This is it! But in that case it works because container is a `%` of screen width, so `translateX` can be calculated. But in bootstrap case, it is fixed in px, so it is not possible. — Augustin Riedinger, Aug 22 '19 at 15:52
Or you can do this: https://stackoverflow.com/questions/50392425/let-div-break-out-of-bootstrap-4-container/56778986#56778986 — Carol Skelly, Aug 22 '19 at 16:12

Augustin Riedinger · Accepted Answer · 2019-08-22T17:18:59.633

Thanks for comments, especially @zim which is pretty much what I ended up doing.

I wrote a utility function to create the .uncontainer class, which builds a full width div, despite being contained within a .container.

Here it goes:

@import '~bootstrap/scss/functions', '~bootstrap/scss/variables';

@mixin make-uncontainer-responsive($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      // Still hesitating with two other attribute : margin-left and translateX;
      // Anyone has an opinion on this?
      left: calc((#{$container-max-width} - 100vw)/2);
    }
  }
}

.container {
  position: relative; // Hopefully this doesn't break anything for you
  .uncontainer {
    position: absolute;
    width: 100vw;
    @include make-uncontainer-responsive();
  }
}

Apparently 100vw is only IE9+ so I guess this is the best compatibility we can achieve. Bootstrap 4 is IE10+ so all is fine. :)

Hope this can help, I'm considering suggesting to make it default to bootstrap.

Boostrap : background image in a .container at the very left of the screen

1 Answers1