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

HTML

Posted by Christian Higgins
Christian Higgins
15,758 Points

Outline button not showing colors?

I have directly copied the Bootstrap code for the Outline info button here

<button type="button" class="btn btn-outline-info">Don't Miss Out, Register Now!</button>

But it's still showing a grey background button with black text. I have included Bootstrap 4 as someone else helpfully answered on a previous question.

EDIT: Adding the complete HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="wdith=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Full Stack Conf</title>
    <!-- bootstrap css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
  </head>
  <body>
    <!-- navbar -->
    <nav class="navbar navbar-dark bg-primary navbar-fixed-top">
      <div class="container">
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#about">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#speakers">Speakers</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#schedule">Schedule</a>
    </li>
  </ul>
      <a class="navbar-brand pull-sm-right m-r-0 hidden-xs-down" href="http://www.teamtreehouse.com">Presented by Treehouse</a>
      </div>
</nav>
    <!-- /navbar -->


    <!-- jumbotron -->
    <div class="jumbotron jumbotron-fluid bg-info">
  <div class="container text-sm-center p-t-3">
    <h1 class="display-3">Full Stack Conf</h1>
    <p class="lead">A One-day Conference About All Things JavaScript!</p>
    <div class="btn-group m-t-2" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary btn-lg">Register Now!</button>
  <a  class="btn btn-secondary btn-lg" href="#speakers">See Speakers</a>
</div>
  </div>
</div>
    <!-- /jumptron -->

    <div class="container p-t-2">
<!-- About -->
      <div class="row">
        <div class="col-lg-4 col-lg-push-4">
          <h3 class="m-b-2">About Full Stack Conf</h3>
          <img class="m-b-1 img-fluid img-rounded hidden-xs-down" src="img/pdx.jpg" alt="Portland">
<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>
        <div class="col-lg-4 col-lg-pull-4">
          <h3 class="m-b-2">Expert Speakers</h3>
<p>Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!</p>
<p>Want to meet the international JavaScript community and share skills with some of the world's top experts, hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p>
<p>Full Stack Conf is committed to being inclusive and welcoming for everyone. We look forward to another intensive day of learning and sharing.</p>
        </div>
        <div class="col-lg-4 col-xl-3">
          <h3 class="m-b-2">What You'll Learn</h3>
<ul>
  <li><strong>MongoDB</strong>: NoSQL database</li>
  <li><strong>Angular</strong>: JavaScript framework</li>
  <li><strong>Express</strong>: Framework for Node</li>
  <li><strong>Node.js</strong>: JavaScript environment</li>
  <li><strong>ES2015</strong>: Latest version of JavaScript</li>
  <li><strong>Babel</strong>: JavaScript compiler</li>
</ul>  
        </div>
      </div><!-- /about-->

      <!-- speakers -->
      <h1 id="speakers" class="display-4 text-xs-center m-y-3 text-muted">Speakers </h1>
      [Speaker bios go here]

      <!-- schedule -->
      <h1 class="display-4 text-xs-center m-y-3 text-muted">Schedule</h1>
      [Conference schedule goes here]

     <!-- callout button --> 
      <button type="button" class="btn btn-outline-info center-block m-y-3">Don't Miss Out, Register Now!</button>

      <!-- signup form -->
<hr>
<div class="row p-y-2 text-muted">
  <div class="col-md-6 col-xl-5">
    <p><strong>About Treehouse</strong></p>
    <p>Treehouse brings affordable technology education to people everywhere to help them achieve their dreams and change the world.</p>
  </div>
  <div class="col-md-6 col-xl-5 col-xl-offset-2">
    <p><strong>Stay up-to-date on Full Stack Conf</strong></p>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Email">
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Sign up</button>
      </span>
    </div>
  </div>
</div>
<hr><!-- /signup form -->
    </div><!-- /container -->
    <!-- jquery first, then Bootstrap -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
  </body>
Leslie Heinzen
Leslie Heinzen
26,662 Points

Hi Christian,

Can you post the rest of the document, or at least where you have included the Bootstrap link? The classes are used correctly here, so this is not enough info.

Thanks! Leslie

Christian Higgins
Christian Higgins
15,758 Points

Thank you, Leslie! I have added the complete code.

2 Answers

Leslie Heinzen
Leslie Heinzen
26,662 Points

A-ha! Got it. Just a case of code dyslexia. Turns out I didn't need the rest of the document, I just don't know or care about Bootstrap enough! :p

This is not a Bootstrap class:

btn-outline-info

Should be:

btn-info-outline

That should do it! That's the hard thing about using a big CSS library like Bootstrap, having to remember all the weird class names.

Happy coding! Leslie

Christian Higgins
Christian Higgins
15,758 Points

Oh wow, thank you! That's weird because I had copied the class directly from the Bootstrap website. I should let them know!

Vince Leung
Vince Leung
4,730 Points
Vince Leung
Vince Leung
4,730 Points

Yea im having the exactly same issue: I copied it from their documentation at http://v4-alpha.getbootstrap.com/components/buttons/ .