CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
user3002173
user3002173

Reputation: 135

Bootstrap - Full width layout two columns with different colors

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

Upvotes: 1

Views: 3828

Answers (2)

Mukul Kant
Mukul Kant

Reputation: 7122

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.

Upvotes: 1

Nofi
Nofi

Reputation: 2175

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

Upvotes: 0

Related Questions