ottz0 ottz0 - 6 months ago 15
CSS Question

Full width background color with centered container

I'm using

Bootstrap V4
and I have a
container
class which has 2 columns red and green col-md-6 that sits in the middle of my page.

However I want to add a red background to the left and green to the right of it that fills 100% width.

Bootstrap V4

my html

<section style="background-color:green">
<div class="container" >
<div class="row">
<div class="col-md-6">
<section>
<div id="hvc-dyk">
<header>
<h1>Did you know...</h1>
<p id="dyk-large">80</p>
<p>
Lorum ipsum
</p>
</header>
</div>
</section>
</div>
<div class="col-md-6">
<section>
This is hre
</section>
</div>
</div>
</div>
</section>

Answer

You can use a linear gradient as the background to simulate this:

body {
    background: -webkit-linear-gradient(left, #f00 50%, #27a31a 50%);
    background: -moz-linear-gradient(left, #f00 50%, #27a31a 50%);
    background: -o-linear-gradient(left, #f00 50%, #27a31a 50%);
    background: linear-gradient(to right, #f00 50%, #27a31a 50%);
}   

Example: https://jsfiddle.net/cqq5e8t1/1/

Comments