Full-width image inside container in Bootstrap 4

Question

I am using Bootstrap 4 and I have a template layout with

<div class="navbar">
  ...
</div>
<div class="container">
  {{content}}
</div>

This works in almost all cases. However, sometimes I want an image in the content to take up the full width, but this is not possible due to the .container which uses left-padding and right-padding.

I could solve this by adding the .container class in each view at the right places instead of in my template layout file, but this will become quite annoying. Especially if I have a CMS where different authors can write articles, and if they want a full-width image in the middle of their article, they have to write raw html to be something like

<div class="container">
  some text
</div>
<div class="full-width-image">
  <img src="" alt="">
</div>
<div class="container">
  more text
</div>
..

How could I solve this problem?

Answer 1

you can use vw units with negative margin. And it's responsive friendly.

.full-width-image {
   width: 100vw;
   position: relative;
   left: 50%;  
   margin-left: -50vw;
}

.full-width-image img {
  width: 100%;
}

See my fiddle: https://jsfiddle.net/ondrejruzicka/07y0o746/