Bootstrap - Full width layout two columns with different colors

Question

My problem with this is that I can't get it right with background coloring. Left column always 'bleeds' into the top of the right column. Help guys, I'm trying to fix this for three days now.

Here's my html code:

<div class="container-fluid">
    <div class="row blue-background">
        <div class="col-lg-6 col-xs-12 col-lg-offset-1">
            <h1>Text here</h1>
        </div>
        <div class="col-lg-5 col-xs-12 gray-background">
            <h2>Another text here</h2>
        </div>
    </div><!--  .row -->
</div><!--  .container-fluid -->

And in my custom CSS file this classes have only background: /value_of_color/

My CSS code:

.blue-background {
    background-color: blue;
}

.gray-background {
    background-color: #eaeaea;
}

@FalcoB Here's what happens when I do that.. [link](http://www.bootply.com/kriG1aUc0f) — user3002173, Sep 23 '15 at 11:26
okay, then its the provided answer! your color class is in the row, not in the col — FalcoB, Sep 23 '15 at 11:27
When I do that, it looks exactly like this.. [link](http://www.bootply.com/y9Yrpp4lKg) — user3002173, Sep 23 '15 at 11:29

score 2 · Accepted Answer · answered Sep 23 '15 at 11:28

You can try like this-

.blue-background {
    background-color: blue;
}
.blue-background:after{
  content:'';
  display:block;
  clear:both;
}

.gray-background {
    background-color: #eaeaea;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
      <div class="blue-background">
        <div class="col-lg-6 col-xs-12 col-lg-offset-1">
              <h1>Text here</h1>
          </div>
          <div class="col-lg-5 col-xs-12 gray-background">
              <h2>Another text here</h2>
          </div>
      </div>
    </div><!--  .row -->
</div><!--  .container-fluid -->

I hope it will helps you.

score 0 · Answer 2 · answered Sep 23 '15 at 11:28

<div class="container-fluid">
    <div class="row ">
        <div class="col-lg-6 col-xs-12 col-lg-offset-1 blue-background">
            <h1>Text here</h1>
        </div>
        <div class="col-lg-5 col-xs-12 gray-background">
            <h2>Another text here</h2>
        </div>
    </div><!--  .row -->
</div><!--  .container-fluid -->

Bootstrap - Full width layout two columns with different colors

2 Answers2

Linked