3

I've been trying to make a Bootstrap container which "spills out" onto the right hand side of the page but also aligns well with the standard Bootstrap container. So far I have tried duplicating the code for the standard container and altering the max-width values but I can't ever seem to make this align with the standard container. Here is what I have so far:

  width: 100%;
  padding-left: 15px;
  margin-left: auto;
  margin-top: 3rem;

  @media (min-width: 576px) {
    max-width: 675px;
  }
  
  @media (min-width: 768px) {
    max-width: 900px;
  }
  
  @media (min-width: 992px) {
    max-width: 1200px;
  }
  
  @media (min-width: 1200px) {
    max-width: 1425px;
  }

Would anyone be able to help me achieve this?

Community
  • 1
  • 1
Nathan Dunn
  • 336
  • 2
  • 3
  • 12
  • This is trivial with CSS-Grid but here's one idea - https://stackoverflow.com/questions/33564131/bootstrap-full-width-with-2-different-backgrounds-and-2-columns – Paulie_D Jun 26 '19 at 18:08
  • or https://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen?lq=1 – Paulie_D Jun 26 '19 at 18:08

2 Answers2

2

You can calculate the left margin of the custom container width based on the Bootstrap container width for each breakpoint. In order for it to align with container, the left margin is going to be:

margin-left: calc(50vw - (container width/2))

So the CSS would be: 

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

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

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

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

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

Demo: https://www.codeply.com/go/gO5EmIIeDi

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

Here is another approach with absolute positioning.

The trick is to customize :after of the relative positioned custom container so that its left is at 100% of the custom container, and its right is at -(50vw - 50%). The percentage is related to the relative positioned custom container.

Zim's approach is good if you're making your custom theme with Bootstrap SASS files and hence you get $container-max-widths. My approach doesn't need to know the container's width because it's doing absolute positioning with percentage!

Layout

<div class="container container-custom text-center bg-primary text-white">
    ...
</div>

Style

.container-custom {
    position: relative;
}

.container-custom:after {
    content: '';
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    right: calc(50% - 50vw);
}

.container-custom.bg-primary:after {
    background-color: var(--primary);
}

Result

enter image description here

demo: https://jsfiddle.net/davidliang2008/gj21tdea/23/

Community
  • 1
  • 1
David Liang
  • 20,385
  • 6
  • 44
  • 70
  • 1
    Yes, this also works if the OP is ok with content inside the custom container being limited to the width of the container. This also causes horizontal scrolling on the body. – Carol Skelly Jun 26 '19 at 18:28
  • @Zim: that's why I was going to comment and ask what "spills out" the OP meant, because from the screenshot OP posted, the content inside the custom container seems to be centered and limited to the width of the container. :) – David Liang Jun 26 '19 at 18:31