Bootstrap full width container with set width divs

Question

I'm trying to divide the background in 2 parts. Left with an image parallax and some text and the right one with 1 color and a button.

The problem is that if I don't set container-fluid the left side is not going to reach the edge of the screen but by setting that my text starts at the very beginning of the screen.

Here's my current code

HTML

<section class="parallax" data-overlay-color="8">
    <div class="background-image">
        <img src="img/backgrounds/bg-racks.jpg" alt="#">
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 text-left mt20">
                <h2>Get 50<span class="bold"> Free Beats</span></h2>
                <p class="lead">
                    Download <strong>50 Free Beats</strong> and start recording today!
                </p>
            </div>
            <div class="col-md-6 text-left bg-theme pt50 pb50">
                <a href="http://themeforest.net/user/vossendesign/portfolio?ref=VossenDesign" target="_blank" class="btn btn-md btn-primary btn-appear shadow-dark">
                    <span>Download Now <i class="ion-unlocked"></i></span>
                </a>
            </div>
        </div>
    </div>
</section>

CSS

.bg-theme { background-color : #4c51e0 }

Related - http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen — Paulie_D, Oct 14 '16 at 20:43

Eric G · Accepted Answer · 2016-10-16T23:16:09.623

0

One solution would be to used bootstraps offset classes. You won't get the exact gutter you would have otherwise but it will get you off the edge. Something like the following gets you close:

<div class="col-md-6 text-left mt20">
    <div class="col-xs-11 col-xs-offset-1">
    </div>
</div>

UPDATE:

You'll also need to duplicate the container+overlay css that you are using for the container-fluid class.

[data-overlay-dark] .container-fluid, [data-overlay-light] .container-fluid, [data-overlay-color] .container-fluid {
    position: relative;
    z-index: 2;
}

Here is my code pen with it in action:

http://codepen.io/egerrard/pen/YGjPkR

edited Oct 16 '16 at 23:16

answered Oct 15 '16 at 00:04

Eric G

2,577
1
14
21

The problem is that now the parallax and overlay effect apply to both layer :/ – Oct 16 '16 at 10:17
this is the site, if it is of any help www.madreal.net – Oct 16 '16 at 10:22
@MadReal there is some css applying to the container class that is raising the z-index. You'll need to add that for the container-fluid class as well. I added some css to my answer that should fix it. You'll still have to mess with padding and that sort of stuff but it should fix it. – Eric G Oct 16 '16 at 23:18
Glad to hear it @MadReal if that is the answer to your question feel free to mark it as correct :) – Eric G Oct 17 '16 at 23:21

Bootstrap full width container with set width divs

1 Answers1