Let DIV break out of Bootstrap 4 container

Question

I'm using a container in Bootstra 4 to center the conent of my page in the middle of the browser. So far so normal.

But I need something more. The content inside the container should break out on the left side and should grow to the browser-window. But only on the left side.

Because I'm using the slick slider, I can't use position:absolute or something else on a single object in the container DIV. I need an whole DIV inside the container to grow to the left side. And I need the container to align it on the right side to the rest of the page.

Here is my actual code: https://codepen.io/cray_code/pen/erQJey

This is what I need. The image inside the slides should grow to the left. The blue background is the browser window:

<div class="bg-dark">
    <div class="container bg-white">
        <div class="slider">
            <div><img src="http://via.placeholder.com/2500x500" class="img-fluid"></div>
            <div><img src="http://via.placeholder.com/2500x500" class="img-fluid"></div>
            <div><img src="http://via.placeholder.com/2500x500" class="img-fluid"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $('.slider').slick({
        infinite: true,
        dots: true,
        arrows: false,
        draggable: false,
        fade:true,
        autoplay:true,
        autoplaySpeed: 4000,
        speed:1200,
    })
});
</script>

You can not do that in Bootstrap unless you use two containers or a fluid-container. — mahan, May 17 '18 at 13:53

Carol Skelly · Answer 1 · 2019-08-22T18:47:08.977

An answer for future readers seeking a CSS only solution. You can calculate the margin right based on the 1/2 the width of the Bootstrap container.

Left-align Bootstrap container: https://www.codeply.com/go/tnjA5Hn8Zs

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

@media (min-width:576px){
  .container-left {
    margin-left: 0;
    margin-right: calc(50vw - 270px);
  }
}

@media (min-width:768px){
  .container-left {
    margin-left: 0;
    margin-right: calc(50vw - 360px);
  }
}

@media (min-width:992px){
  .container-left {
    margin-left: 0;
    margin-right: calc(50vw - 480px);
  }
}

@media (min-width:1200px){
  .container-left {
    margin-left: 0;
    margin-right: calc(50vw - 570px);
  }
}

Dessauges Antoine · Accepted Answer · 2018-05-18T08:28:45.310

1

Try this (codepen)

HTML:

<div class="bg-dark">
    <div class="container bg-white">
        Content
    </div>
    <div class="slider">
        Slider
    </div>
    <div class="container bg-white">
        Content2
    </div>
</div>

JS:

var width = $(window).width() - (($(window).width() - 
$('.container').outerWidth() ) / 2);
$('.slider').width(width+'px');

$( window ).resize(function() {
    var width = $(window).width() - (($(window).width() - $('.container').outerWidth() ) / 2);
    $('.slider').width(width+'px');
});

edited May 18 '18 at 08:28

answered May 17 '18 at 13:20

Dessauges Antoine

574
4
28

Thanks, but thats not what I need. I want the slider inside the container and just let it outgrow it on one side. And it should stay in the container on the other side (middle of the page). – Cray May 17 '18 at 13:21
@Cray I can't visualize the result. If you have an example it will help – Dessauges Antoine May 17 '18 at 13:22
I added an image – Cray May 17 '18 at 13:27
Looking a [this example](https://jsfiddle.net/hibbard_eu/5ox31m2a/) of slick slider, it should be done by slick slider. @Cray – Dessauges Antoine May 17 '18 at 13:32
I don't see how that could help, sorry. – Cray May 17 '18 at 13:32
ah ok, no problem :-) – Cray May 17 '18 at 13:36
I don't really know how to do it, but maybe you could put your all slider in a div, put this div in position absolute and left 0. And with some js you change the width of this new div to : container.width + ((page.width - container.width) / 2). Maybe tricky but I try :P – Dessauges Antoine May 17 '18 at 13:38
@Cray I edited my answer with how you can possibly do it – Dessauges Antoine May 17 '18 at 13:47
Thanks! It works but it doesn't resize the container in smaller screens. Do I miss something? – Cray May 17 '18 at 14:52
Humm, Maybe you can use the bootsrap class `container-fluid` instead of `container` just for the slider ? And add a padding-right ? I think you should just not use bootstrap for this part. Or use it with the column. Like give `col-md-1` for left and right part and `col-md-10` for the content and when you have your slider you put in a `col-col-md-11` with an empty `col-md-1`. Still tricky :/ – Dessauges Antoine May 18 '18 at 07:03
I will try that but I think it wouldn't be accurate in the middle. What if I don't use bootstrap? – Cray May 18 '18 at 08:06
You're welcome ! Happy to find a solution and was an interesting problem. – Dessauges Antoine May 18 '18 at 08:43
one last question: is there a way to limit the JS code to the deskop view – Cray May 18 '18 at 08:44
See [this](https://stackoverflow.com/questions/22162353/execute-jquery-only-on-desktop-site-dont-execute-jquery-on-mobile) or just add an if when `$(window).width()` is bigger than the size you want. – Dessauges Antoine May 18 '18 at 08:48

Let DIV break out of Bootstrap 4 container

2 Answers2

Linked