Enable bootstrap column backgrounds to bleed to edge of viewport - html

Question

I'm trying to work out how to achieve the following in Bootstrap 3:
I have a HTML page which is primarily based around bootstrap's fixed container grid.
Half way down the page I want a row with columns of different sizes.
I want the content (text / images) inside these columns to line up with the content inside the columns in the fixed container grid.
I want the background colours of the left and right furthest columns to bleed right to the edge of the page.
It may help if I illustrate what I'm trying to achieve:
Any help would be greatly appreciated!
Update: as requested here's some code examples of what I currently have: http://www.bootply.com/ZzOefJGRRq As you can see the text and columns in the fluid container are not lining up correctly.

Answer 1

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 2

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 3

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

Answer 4

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 5

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.