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 Getting to Know Bootstrap Enhancing the Page

Michael Thompson
Michael Thompson
7,427 Points
Posted by Michael Thompson
Michael Thompson
7,427 Points

Button style

The button example he's using doesn't exist anymore on bootstrap. The only option close makes the button transparent until the mouse hovers over it. Any way to fix that?

2 Answers

Stefan Piatkov
Stefan Piatkov
14,312 Points
Stefan Piatkov
Stefan Piatkov
14,312 Points 
<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/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body class="bg-info text-white">
    <div class='container text-center'>
      <h1 class='display-1 mt-5'>Full Stack Conf</h1>
      <p class='lead mb-5'>Coming soon, A One-day conference about all things JavaScript!</p> 

      <div class="col-lg-6 mx-auto">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Enter your e-mail for info" aria-label="Enter your e-mail for info">
          <span class="input-group-append">
            <button class="btn btn-primary" type="button">Sign Up!</button>
          </span>
        </div>
      </div>
    </div>
  </body>

The code in the <body> tags should be the same.

However in the <head> tags I have updated the <link> tag with the Bootstrap to use the most current version at this time.

Hope this helps!

Gabbie Metheny
Gabbie Metheny
33,778 Points
Gabbie Metheny
Gabbie Metheny
33,778 Points

Can you provide a snippet of your markup? The current Bootstrap docs show the same button examples that Guil uses in the video, but my guess is that maybe you're using btn-outline-primary instead of btn-primary, which does give you a transparent button until it's hovered over (which looks great on white, but not so good on another shade of blue).

Let me know if that change doesn't work!