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

Justin Sanchez
Justin Sanchez
7,131 Points
Posted by Justin Sanchez
Justin Sanchez
7,131 Points

How do you change the Bootstrap font style?

I was wondering how do yall change the Bootstrap font style? I've been using CSS then targeting the .navbar, .nav-link, .nav-item, etc but nothing happens.

2 Answers

Katie Wood
Katie Wood
19,141 Points

That should work - why it isn't would depend on some things, so I'm just going to list how to override any bootstrap styles.

  • make your own css file
  • add your new sheet to your html file - make sure it's after the link to bootstrap
  • code away - as long as the link to your stylesheet is after the one to bootstrap, any styles in your sheet should override those in bootstrap.

If you've done these things and it still doesn't work, some code or a link to your workspace (if you're using one) would be helpful!

Justin Sanchez
Justin Sanchez
7,131 Points
Justin Sanchez
Justin Sanchez
7,131 Points

I got it. Thanks! I actually had to be more specific when selecting the part of the navbar I wanted to stylize.

h1,
.navbar-brand,
.navbar-nav a {
  font-family: 'Merriweather', serif;
}

<a class="navbar-brand" href="#">Box</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>