Carson Carson - 20 days ago 7
CSS Question

Changing the background color of the body while using Bootstraps grid

I'm very new to Bootstraps, trying to use their grid system. However I can't change the body background-color now. My stylesheet is working, cause I can change the background color of the container class. I assume something with Bootstraps is overriding my body background-color, and font as well.

Thanks.

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="clearfix">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</body>
</html>


CSS

body{
font-family: Arial;
background-color: #455A64;
}

Answer

You should be including your stylesheet after Bootstrap's, like so:

<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/style.css">

Because bootstrap is included last in your code, its CSS is overriding your styles defined in style.css. You should typically include your stylesheets after all frameworks/libraries you use so you can properly override styles if necessary.

Comments