Container Full Width Override

Hey,

I’m looking to override the parent container by making a certain div full-width (touch both sides of the screen).

I initially did a StackOverflow search for solutions and whilst some provide a sort-of solution, I’m looking for something that fully works and is responsive.

Ideally, you’d be able to have this markup:

<div class="container">
    <div class="container-full">
        <p>I'm full width</p>
    </div>
</div>

built-in to Bootstrap. The reason I think it’s a valid feature request is that, frameworks like Symfony, WordPress, Magento etc. etc. break up all of their files into templating files, e.g. header.phtml, footer.phtml. This causes an issue with coding up designs due to setting a generic container after your <header></header> tags to keep everything generally in a container, however, there may be the desire for a full-width feature image.

My current code to try and achieve this is:

<div class="container">
    <img src="https://www.legendaryrides.eu/wp-content/uploads/2017/10/top-banner.jpg"
             class="img-fluid" />

    <div class="container-full">
        <div class="contents">
            <img src="https://www.honda-mideast.com/en/-/media/honda/bikes/africa-twin-adventure-sport/perfomec-banner.jpg"
                 class="img-fluid" />
        </div>
    </div>

    <img src="https://www.digitalgames.ro/images/2015/06/For-Honor-Logo-HD.jpg" class="img-fluid" />
</div>

With this CSS:

div.container-full {
    background: #ccc;
    left: 50%;
    margin-left: -50vw;
    position: relative;
    width: 100vw
}

and this JS:

function fullRowResize()
{
    let bodyWidth = $('body').width(),
         fullContainer = $('.container-full');

    fullContainer.css('width', (bodyWidth));
    fullContainer.css('margin-left', ('-'+ (bodyWidth / 2) +'px'));

    return false;
}

$(window).on('resize', fullRowResize());

This kind of works but not as dynamically and responsive as it should be… is there anything currently in Bootstrap 4 that achieves my goal?

[florianlacreuse]

@ibash Sorry but it doesn’t look to a valid feature request to me too. 3 possible options in your case:

• Move down div container in index.php, index2.php, etc. and then use either .container or .container-fluid.
• I’m not familiar with PHP framework, however good Java framework UI give the opportunity to use variables for any attributs of any html tags.
• Keep with custom css code on your own but Bootstrap can not be involved, I guess.

Good luck with your layout.

[ibtrey]

@ysds

It seemed almost there - though large images scale outside the container. Seems like to use this solution you’d sorta have to build your own css lib to handle everything, and then, at that point - what’s the point of using Bootstrap…?