hcgriggs hcgriggs - 5 months ago 11
CSS Question

How to fill entire div with background color

I'm trying to get a background color to fill the entire div in a child div in bootstrap, but I'm completely stuck. I want the right section to be yellow, but it's only highlighting the text in the div.

Here's a fiddle.

I know I'm missing something really obvious, but how do I get yellow to fill the entire

col-lg-6
div?


.new-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}

.yellow {
background-color: yellow;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<section id="new" class="new-section">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h1>Section left</h1>
</div>
<div class="col-lg-6 yellow">
<h1>Section right</h1>
</div>
</div>
</div>
</section>




Answer

This is happening because you are using .col-lg-* with .container which only has width:1170px

So change .container to .container-fluid

See more info about containers in bootstrap docs

.new-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #eee;
}
.yellow {
  background-color: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- New Exhibit Section -->
<section id="new" class="new-section">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-6 col-lg-6">
        <h1>Section left</h1>
      </div>

      <div class="col-xs-6 col-lg-6 yellow">
        <h1>Section right</h1>
      </div>
    </div>
  </div>
</section>

Comments