0

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;
}
Carson
  • 1,147
  • 5
  • 19
  • 41

2 Answers2

2

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.

samrap
  • 5,595
  • 5
  • 31
  • 56
0

It is not good practice but you can also do 

<body style="font-family:Arial; background-color:#455A64">
--------
</body>

you can also use scoped style tags in the body, but it's good practice to keep your CSS separate as it allows for easy editing as well as using the same CSS for multiple elements. Hope this helps!

Ciarán O'Mara
  • 9
  • 2