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 Bootstrap Basics Using Bootstrap Components Buttons and Button Groups

Posted by gabe7houston
gabe7houston
1,791 Points

Where do you change the white font to black in the button "See Speakers"?

Note: I made minor custom changes to the page code. I also tried to add a favicon should you notice this however this didn't work. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Boot Strap</title>
    <link rel="icon" href="favicon.png/">
    <!-- 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">
  </head>
  <body id="home" data-spy="scroll" data-target="#.navbar" data-offset="100">


    <!-- 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://www.websitehere.com" target+"_blank">website</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
              <a class="nav-item nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
              <a class="nav-item nav-link" href="#about">About</a>
              <a class="nav-item nav-link" href="#speakers">Speakers</a>
              <a class="nav-item nav-link" href="#schedule">Schedule</a>
            </div>
          </div>
        </div>
    </nav>


     <!-- /navbar -->


    <!-- jumbotron -->
      <div class="jumbotron jumbotron-fluid bg-info text-white">
        <div class="container text-sm-center pt-5">
          <h1 class="display-2">Title Here</h1>
          <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>


      <!-- button group CTA -->
      <div class="btn-group mt-4" role="group" aria-label="callout buttons">
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#register">Register Now</button>
        <a class="btn btn-warning btn-lg" href"#speakers">See Speakers</a>
          </div>
        </div>
      </div>


      <!-- /jumbotron -->
      <!-- Bootstrap Equal-width -->
        <div class="container pt-4">
      <!-- about -->
        <div id="about" class="row">
          <div class="col-lg order-lg-2">
            <h3 class="mb-4">About Full Stack Conf</h3>
            <img class="mb-4 img-fluid rounded d-none d-sm-block" src="img/pdx.jpg" alt="Portland"> <!-- Hidden only on xs -->
            <p>The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p>
            <p>Explore the future of JavaScript with a lineup of industry professionals. Discover new techniques to advance your career as a web developer.</p>
          </div>

1 Answer

Harley Urquhart
Harley Urquhart
26,203 Points

you can target that button using multiple methods

you could type inline using the style attribute ie

<a href="#speakers" style="color:white;">See Speakers</a>

you could also target it using the attribute selector in css

a[href="#speakers"]{
  color: white;
}

you could also give it a class and target that ie 

<a class="btn btn-warning btn-lg white" href="#speakers" style="color:white;">See Speakers</a>

.white{
  color: white;
}

or you could target and existing class

btn-warning{
color:white
}
Harley Urquhart
Harley Urquhart
26,203 Points

hope that helps you out

gabe7houston
gabe7houston
1,791 Points

Thank you Harley! And for the additional time explaining each option.