Let image overflow the grid in Bootstrap 4

Question

I want to display an image like in the screenshot below. It should start inside the grid but scale to the left or right of the screen.

At the moment, I'm not sure how to achieve this because the container limits the with. But I need the container to let it start inside the grid?!

I've tried this: Extend bootstrap row outside the container

Here's the code:

#main {
    background: lightgreen;
    height: 100vh;
}

#main > .row {
    height: 100vh;
}

.left {
    background: red;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.left:before {
    left: -999em;
    background: red;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

    
        
            ..

But the solution isn't working with images.

tao · Accepted Answer

Here's how I'd do it.

JS

function extendables() {
  $('.extend-left,.extend-right').each(function(i, e) {
    let w = ($(window).width() - $(e).closest('[role="main"]').width()) / 2;
    $(e).css({
      position: "relative",
      width: $(this).closest('[class^="col-"]').width() + w + 'px'
    })
    if ($(e).is('.extend-left')) {
      $(e).css({
        left: '-' + w + 'px'
      });
      if ($(e).is('.extend-right')) {
        $(e).width($('body').width() + 'px')
      }
    }
  })
}

$(window).on('load resize', extendables);

CSS

/* 
 * You don't really need this. I only added it to make images
 * grow to 100% width of their container when they are too small.
 */
[class^="extend-"] img {
  display: block;
  width: 100%;
  height: auto;
}

Markup

the markup should be placed inside the column you want to extend.
it assumes a column extended to the left is already touching the left side of the container and a column extended to the right already touches the right side of the container.
adding both classes inside a col-12 column will extend to full width.
if you use it extensively (over 10 cases per page, with lots of contents) and page seems sluggish on resize event, you might want to throttle the call on extendables() at 10ms, maybe 20ms.
main advantage over similar methods being it does not need position:absolute on the extended element, so it can naturally grow the height of parent according to contents
you can safely change the class names from extend-left/right to whatever you want, in case there is any clashing with theme class names. Just change them everywhere (markup, js + css).

Proof of concept:

function extendables() {
  $('.extend-left,.extend-right').each(function(i, e) {
    let w = ($(window).width() - $(e).closest('[role="main"]').width()) / 2;
    $(e).css({
      position: "relative",
      width: $(this).closest('[class^="col-"]').width() + w + 'px'
    })
    if ($(e).is('.extend-left')) {
      $(e).css({
        left: '-' + w + 'px'
      });
      if ($(e).is('.extend-right')) {
        $(e).width($('body').width() + 'px')
      }
    }
  })
}

$(window).on('load resize', extendables);

[class^="extend-"] img {
  display: block;
  width: 100%;
  height: auto;
}

/* Everything below is not needed for .extend-* classes to work
 * I simply copied it from the Bootstap sticky footer example
 */
 
/* Sticky footer styles
-------------------------------------------------- */

html {
  position: relative;
  min-height: 100%;
}

body:not(#_) {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px;
  /* Vertically center the text there */
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */


/* Not required for template or sticky footer method. */

body>.container {
  padding: 60px 15px 0;
}

.footer>.container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}







  
  
    Fixed navbar
    
    
      
        
          Home (current)
        
        
          Link
        
        
          Disabled
        
      
      
        
        
      
    
  


  Lorem ipsum...
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel erat ligula. Nulla vehicula molestie nulla id eleifend. Nam sodales augue nisi, id laoreet orci tristique nec. Aliquam laoreet felis eget enim rhoncus placerat. Cras sit amet elementum mi, eu placerat ante. Fusce blandit urna sit amet eros hendrerit, ut scelerisque metus mollis. Duis molestie ligula vel ipsum tristique, eu congue odio vehicula. Sed turpis ex, tincidunt vitae nunc in, egestas dictum nibh.
  
Pellentesque nec viverra libero. Vivamus ac commodo sem. Vestibulum suscipit euismod consequat. Aliquam ut nibh et arcu accumsan malesuada. Suspendisse volutpat tortor ligula, nec ultricies enim laoreet at. Nunc ligula metus, porttitor at faucibus vitae, tristique quis justo. Integer euismod ultricies neque sit amet fringilla. Nunc volutpat dui sed ante volutpat pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus consectetur tincidunt turpis vel posuere. Phasellus convallis ex odio, porttitor varius quam eleifend at. Phasellus accumsan velit metus, in mollis est porttitor in.

  

    
      
        
      
      Mauris fermentum magna nec est tincidunt, sit amet commodo leo lacinia. Sed in ligula sit amet nisi vestibulum eleifend. Suspendisse potenti. Vestibulum nibh lectus, facilisis et placerat non, posuere nec tellus. Suspendisse potenti. Maecenas elit nunc, volutpat dignissim volutpat a, convallis sagittis velit. Etiam molestie dolor vitae posuere ornare. Sed commodo nibh at felis scelerisque euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed iaculis est a tellus auctor cursus. Cras porttitor bibendum metus, id hendrerit tortor pretium eu. Sed sed pulvinar arcu.
    
  
  
    
      
        
      
      In eget mollis mauris. Suspendisse semper dui non felis eleifend rutrum. Nunc tempus nulla vitae bibendum ultricies. Praesent convallis varius odio et condimentum. Mauris ut convallis quam. Sed ac neque mauris. Vestibulum tincidunt eu urna ut convallis. Fusce et pellentesque lacus. Integer lorem ante, placerat at posuere id, vulputate at erat. Curabitur eget risus quis nisl eleifend tristique. Donec tincidunt congue nibh, eu dignissim erat.
    
  
  
    
      
        
      
    
  
  Lorem ipsum...
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel erat ligula. Nulla vehicula molestie nulla id eleifend. Nam sodales augue nisi, id laoreet orci tristique nec. Aliquam laoreet felis eget enim rhoncus placerat. Cras sit amet elementum mi, eu placerat ante. Fusce blandit urna sit amet eros hendrerit, ut scelerisque metus mollis. Duis molestie ligula vel ipsum tristique, eu congue odio vehicula. Sed turpis ex, tincidunt vitae nunc in, egestas dictum nibh.
  
Pellentesque nec viverra libero. Vivamus ac commodo sem. Vestibulum suscipit euismod consequat. Aliquam ut nibh et arcu accumsan malesuada. Suspendisse volutpat tortor ligula, nec ultricies enim laoreet at. Nunc ligula metus, porttitor at faucibus vitae, tristique quis justo. Integer euismod ultricies neque sit amet fringilla. Nunc volutpat dui sed ante volutpat pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus consectetur tincidunt turpis vel posuere. Phasellus convallis ex odio, porttitor varius quam eleifend at. Phasellus accumsan velit metus, in mollis est porttitor in.


  
    Place sticky footer content here.

Let image overflow the grid in Bootstrap 4

Answers (2)

JS

CSS

Markup

Related Questions