Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Gedalyah (Gary) Frankel
Gedalyah (Gary) Frankel
Courses Plus Student 7,234 Points

How to override a bootstrap preset parameter?

How do I override a bootstrap preset parameter. For instance the following code sets the link text color to white. I want to override the white text with red. I'm able to override the font-family: and the font-size: for example, but I can't figure out how to override the background-color: nor the text color.

I'm lost?

<!DOCTYPE html> <html lang="en"> <head> <title>Full Stack Conf</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">

</head> <body>

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
        <div class="container">
          <a class="navbar-brand order-1 mr-0" href="https://teamtreehouse.com" target="_blank">Presented by Treehouse</a>
      </div>
    </nav>
    <!-- /Navbar -->

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</body> </html>

/* My CSS */

.navbar-dark { background-color: black; display: inline; color: red;
font-family: Broadway; font-size: 2.5em; padding: 5px 20px;
}

1 Answer

Justin Cantley
Justin Cantley
18,068 Points

If you use your chrome inspector tool you can figure out how bootstrap is targeting particular elements in your code and then override them.
Sometimes you will encounter a style that has the !impoortant rule applied to it which is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. In your specific case of trying to override the background color and the font color you can apply the following code:

.bg-primary {
    background-color: black!important; 
}

.navbar-dark .navbar-brand {
    color: red;
}