Tyler Jensen Tyler Jensen - 6 months ago 18
HTML Question

Why isn't background-color working for me?

I am working through Free Code Camp and trying to setup a portfolio type page. Under the about me section there is a div called content section. No matter what I do I can not add a background color to it. I have tried inline, adding an id, and adding a class but it just wont change. Any suggestions?





<!--Navbar-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Porfolio</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</div>
</nav>
<!--hero-->
<div class="jumbotron" id="hero">
<h1>Personal Portfolio</h1>
</div>
<!--About Me-->
<div class="content-section" style="background-color:red;">
<div class="col-md-6">
<h1>Tyler Jensen</h1>
<p>I am starting to work on my front end skills.</p>
</div>
<div class="col-md-6">
<img class=
"img-thumbnail" src="1969391_10202992168661853_8988955640237620329_n.jpg">
</div>
</div>
<!--Portfolio-->
<div class="content-section">
<div class="col-md-3"><img src="/Hausbarn.jpg" width="200px" alt="german hausbarn"></div>
<div class="col-md-3"><img src="/CuppUC.jpg" width="200px" height="133px" alt="cupp insurance"></div>
<div class="col-md-3"><img src="/BackflowPipe.jpg" width="200px" height="133px" alt="cupp insurance"></div>
<div class="col-md-3"><img src="/carrier1.jpg" width="200px" height="133px" alt="cupp insurance"></div>
</div>
<!--Footer-->
<footer class="footer">
<div class="content-section">
<div class="col-md-4 text-center">
<ul style="display: inline-block">
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Porfolio</a></li>
<li><a href="#">Contact Me</a></li>
</div>
<div class="col-md-4 text-center">1234 Street<br>Chicago, Il </div>
<div class="col-md-4 text-center"><img src="" width="200px"></div>
</div>
</footer>
</body>

Answer

Add a class of clearfix to the one that has the background color: http://getbootstrap.com/css/#helper-classes-clearfix

It has to do with the Block Formatting Context: How does the CSS Block Formatting Context work?

When you have a container (<div) with elements inside that are floated (in your case, the columns), the parent collapses to 0 height (so the background is there, but can't see it). There are different ways to fix the issue, one of them is the clearfix solution. I sometimes just set the parent to overflow:hidden to fix the issue.

More on clearfix: What is clearfix?