Bootstrap - full-screen layout of two columns with different colors

Question

My problem is that I cannot get it right with the coloring of the background. The left column always “bleeds” to the top of the right column. Help guys, I've been trying to fix this for three days now.

Here is 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, these classes only have a background: / value_of_color /

My CSS code is:

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

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

Answer 1

You can try 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 -->

Run codeHide result

Hope this helps you.

Answer 2

<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 -->