Enable bootstrap column backgrounds to bleed to edge of viewport

Question

I\'m trying to work out how to achieve the following in Bootstrap 3:

1. I have a HTML page which is primarily based around bootstrap\'s fixed container grid.

Answer 1

You can implement the container-fluid to achieve this.

Basically your webpage will have the following structure:

<div class="container">
   <p>Content here</p>
</div>
<div class="container-fluid">
   <p>"Bleeded" content here</p>
</div>
<div class="container">
   <p>And it continues with the fixed width!</p>
</div>

If you need to adjust the spaces between those containers, you can add your own classes or ID:s to each and kind of take it from there. Since containers in Bootstrap don't have much of a default styling, this is very efficient way of creating what you're looking to do in here.

EDIT: After inspecting the comments section and looking at the code you provided, I assume you want to have the fluid container, but keep the contents within it lined up with the fixed container, right?

For this, you can just put another <div class="container">...</div> in your container-fluid. Check the updated fiddle.

Answer 2

Where you have the special row, you need a div with container-fluid class encapsulating a div with container class (this is a fixed width class).

Then you need to account for the background colours either side. Either add additional divs within container-fluid each side of container and set background colour, or perhaps use a three column table.

Answer 3

You can use :before elements and some classes

https://jsfiddle.net/ex3ntia/wa8myL9v/2/

.bg:before {position:absolute;left:0em; content:'';height:100%;width:800em;z-index:-1}

UPDATE

added media query for small devices https://jsfiddle.net/ex3ntia/wa8myL9v/3/

UPDATE 2

I have added the following line to fix the big horizontal scroll on chrome browsers.

body, html {overflow-x: hidden;margin: 0;padding: 0;}

Answer 4

Bootstrap 4

Use position absolute before or after elements with width: 50vw

Codepen

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      ...
    </div>
  </div>  
  <div class="row">
    <div class="col-lg-6 c-col-bg--red">
      ...
    </div>
    <div class="col-lg-6 c-col-bg--blue">
      ...
    </div>
  </div>
</div>

CSS

.container-fluid {
    max-width: 1000px;
}

@media (min-width: 992px) {
    div[class*="c-col-bg"] {
        position: relative;
    }

    div[class*="c-col-bg"]:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: -1;
        width: 50vw;
    }

    .c-col-bg--red:after {
        right: 0;
        background: red;
    }

    .c-col-bg--blue:after {
        left: 0;
        background: blue;
    }
}

Answer 5

TLDR; no framework has this out of the box, because covering all possible use cases is both very complex and would result in a huge amount of code.

It is doable but requires some amount of manual coding. The approach below works for 2 columns. More columns and breakpoints will require a more complex solution.

Sample markup:

<div class="container">
  <div class="row">
    <div class="col-5">default column</div>
    <div class="col-7">default column</div>
  </div>
</div>
<div class="container container--fluid">
  <div class="row">
    <div class="col-5">fluid column, aligned with above</div>
    <div class="col-7">fluid column, aligned with above</div>
  </div>
</div>
<div class="container container--bleed">
  <div class="row">
    <div class="col-5">
      <div class="content">like fluid, but content is aligned with default</div>
    </div>
    <div class="col-7">
      <div class="content">like fluid, but content is aligned with default</div>
    </div>
  </div>
</div>

scss for brevity

  // assuming you have these values or able to set them
  $max-width: 1140px;
  $gutter: 8px;
  $grid: 12;
  $customColumns: [5, 7]; // columns you want to align

  // sample grid
  .container {
    max-width: $max-width;
    margin: 0 auto;
    padding-left: $gutter;
    padding-right: $gutter;
  }
  .row {
    display: flex;
    margin-left: -$gutter;
    margin-right: -$gutter;
  }
  div[class^='col'] {
    max-width: 100%;
    padding-left: $gutter;
    padding-right: $gutter;
    position: relative;
  }
  @for $i from 1 through $grid {
    .col-#{$i} {
      width: calc(100% * #{$i} / #{$grid});
    }
  }
  .container--bleed, .container--fluid {
    max-width: none;
  }
  
  // custom grid rules for alignment
  @media(min-width: #{$max-width}) {
    @each $i in $customColumns {
      .container--bleed, .container--fluid {
        .col-#{$i}:first-child, .col-#{$i}:last-child {
          width: calc(#{$max-width * $i / $grid} + ((100% - #{$max-width}) / 2));
        }
      }
      .container--bleed {
        .col-#{$i}:first-child { 
          padding-left: calc((100% - #{$max-width}) / 2 + #{$gutter});
        }
        .col-#{$i}:last-child { 
          padding-right: calc((100% - #{$max-width}) / 2 + #{$gutter});
        }
      }    
    }
  }

I created a codepen POC for a similar layout here: https://codepen.io/bariscc/pen/BajKpMP