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?

Solution 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/

Solution 2

In bootstrap 4, you can apply img-fluid class:

<img class="img-fluid w-100" src="path.jpg" />

Here w-100 class is applied to ensure smaller images to fit to it's container.

For those who are using bootstrap 3: Just apply img-responsive instead of img-fluid.

Solution 3

As a simple solution that doesn't require any css, you can use a px-0 spacing utility to set the image to full width.

<!-- FULL-WIDTH IMAGE --> 
<div class="container-fluid">
  <div class="row">
    <div class="col-12 px-0">
      <img class="img-fluid" src="your-image">
    </div>
  </div>  
</div>

<!-- 12 COLUMN IMAGE --> 
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <img class="img-fluid" src="your-image">
    </div>
  </div>  
</div>

see this code pen:

full width image

@fdhu

CodePen

more about spacing utilities: https://getbootstrap.com/docs/4.1/utilities/spacing/

Solution 4

I just have the feeling that this one could help you. What I did was make the image as the background to the <div> itself and set the specified height to have the image visible since there are no contents inside.

CSS

.full-width-image {
  height: 300px; // your specified height
  background: url("your-image.jpg") no-repeat center center fixed;
  background-size: cover;
}

Plus to have it the left and right padding to align with your other contents add the class .container.

HTML

<div class="container full-width-image"></div>

Here's a sample demo of it.

View more solutions

Comments

[Zim]

Are you using container-fluid?

[Jamgreen]

No, I am not. But I just read that if I use <div class="container-fluid"><div class="row">no padding</div></div>, I could maybe obtain what I want. Why is this behaviour not in the .container class :(

[Zim]

container is meant for a fixed width layout, container-fluid is for full width.

[trainoasis]

He knows that, but then he needs to use .container and after it .container-fluid and then .container again and so on. A lot of work by adding .container all the time instead of having it as default and just selecting what's fluid afterwards.

[Out of Orbit]

Nice one! I would also add a "max-width: 100vw;" as some conflicting css with this property set would otherwise mess it up.

[kara]

For using full-width-image like image class add height: auto.

[Vinicius Garcia]

I just try this solution and it has a problem. If you have scroll bar, the calculations get messy and a horizontal scroll bar is added. See the example: jsfiddle.net/ondrejruzicka/07y0o746 I change the left: 50%;to be left: 49% but that's very ugly solution... do you guys know how to fix this? Thanks!

[Harsha]

in my case, without w-100 it was not fit on the larger screens, thanks.