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 4 Basics (Retired) Using Bootstrap Components Horizontal Navs and Dropdown Buttons

Mark Brady
Mark Brady
6,239 Points
Posted by Mark Brady
Mark Brady
6,239 Points

My Bootstrap drop down in my footer isn't working.

Hello fellow coders!

I'm stuck on this and I feel like I'm following Guil pretty well through the videos, but it's not working.

Any ideas?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=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.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
  </head>
  <body>

    <!-- Navbar -->

    <nav class="navbar navbar-fixed-top navbar-dark bg-primary">
      <div class="container">
       <ul class="nav navbar-nav">
          <li class="nav-item">
            <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 float-sm-right mr-0 hidden-xs-down"href="#">Presented by TreeHouse</a>
    </div>
</nav>

    <!-- Jumbotron -->

    <div class="jumbotron jumbotron-fluid bg-info text-white">
      <div class="container text-sm-center pt-3">
        <h1 class="display-2 bold-text">Full Stack Conf</h1>
        <p class="lead">A One-Day Conference About All Things JavaScript</p>

        <div class="btn-group mt-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>

    <!-- /Jumbotron -->

    <!-- /Navbar -->

   <div class="container pt-2">
   <!-- About  -->
    <div class="row">
      <div class="col-lg-4 push-lg-4">
        <h3 class="mb-2">About Full Stack Conf</h3>
        <img class="mb-1 img-fluid rounded" src="img/pdx.jpg" alt="photo of 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 pull-lg-4">
        <h3 class="mb-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">
        <h3 class="mb-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 py-3 text-muted">Speakers</h1>
      [Speakers go here]

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

     <!-- Callout button -->

     <button type="button" class="btn btn-outline-info d-block mx-auto my-3">Don't Miss Out, Register Now!</button>

     <!-- /Callout button -->

     <!-- signup form -->
      <hr>
      <div class="row py-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 offset-xl-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 -->

     <!-- Footer -->
   <div class="row p-y-1">
    <div class="col-md-7">
      <ul class="nav nav-inline">
        <li class="nav-item">
          <a class="nav-link active" href="#">Community</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Tracks</a>
        </li>
        <li class="nav-item">
          <!-- Example split danger button -->
        <div class="btn-group">
          <button type="button" class="btn btn-secondary">Other Confs</button>
          <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">CSS Conf</a>
            <a class="dropdown-item" href="#">Python Conf</a>
            <a class="dropdown-item" href="#">Java Conf</a>
            <a class="dropdown-item" href="#">Swift Conf</a>
          </div>
        </div>
        </li>
      </ul>
    </div>
    <div class="col-md-5 text-md-right">
      <small>&copy; 2016 Full Stack Conf &amp; Treehouse</small>
    </div>
   </div>

     <!-- /Footer -->

   </div><!-- .container -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
  </body>
</html>

1 Answer

Eduardo Parra San Jose
Eduardo Parra San Jose
12,579 Points

Hi,

With the following changes, it will work :)

To make it drop instead of drop down, you have to add the class dropup to the btn-group:

<div class="btn-group dropup">
    <button type="button" class="btn btn-secondary">Other Confs</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">CSS Conf</a>
        <a class="dropdown-item" href="#">Python Conf</a>
        <a class="dropdown-item" href="#">Java Conf</a>
        <a class="dropdown-item" href="#">Swift Conf</a>
    </div>
</div>

Bootstrap4 depends on jQuery and Tether, so you have to add both before including bootstrap4:

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

</body>

I hope it helps. Have a nice day.