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 Inline Navs and Dropdown Buttons

Joshua Munoz
PLUS
Joshua Munoz
Courses Plus Student 7,794 Points
Posted by Joshua Munoz
Joshua Munoz
Courses Plus Student 7,794 Points

Small Problem with: Inline Navs and Dropdown Buttons

So i'm running in to an issue with the Split Button code on this project in Bootstrap Basics. Everything was working smoothly until I got to the last part of the lesson and the Dropdown menu doesn't work, i've tried a few possible solutions and it just won't work. Any about on how to fix this would be appreciated! Here's my code: 

<!DOCTYPE html>
<html lang="en">
      <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-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
      </head>
      <body>

        <!--  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.teamtreehouse.com" target="_blank">Presented by Treehouse</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">Full Stack Conf</h1>
            <p class="lead">A One-day Conference About All Things JavaScript!</p>
            <div class="btn-group mt-4" role="group" aria-label="Callout buttons">
      <button type="button" class="btn btn-primary btn-lg">Register Now</button>
      <a class="btn btn-light btn-lg" href="#speakers">See Speakers</a>
    </div>
          </div>
        </div><!--  /jumbotron  -->

        <div class="container pt-4">
          <!-- about -->
          <div 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">
              <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 order-lg-1">
              <h3 class="mb-4">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 order-lg-3">
              <h3 class="mb-4">What You'll Learn</h3>
              <ul>
                <li><strong>MongoDB</strong>: NoSQL database</li>
                <li><strong>Express</strong>: Framework for Node</li>
                <li><strong>React</strong>: JavaScript library</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-center my-5 text-muted">Speakers</h1>
          [Speaker bios go here]
          <!--/speakers-->

          <!--   schedule   -->
          <h1 class="display-4 text-center my-5 text-muted">Schedule</h1>
          [Conference schedule goes here]
          <!--   /schedule   -->


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


          <!-- signup form -->
    <hr>
    <div class="row py-4 text-muted">
      <div class="col-md 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 col-xl-5 ml-auto">
        <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 py-3">
    <div class="col-md-7"> 
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="#">Community</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Tracks</a>
        </li>
        <li class="nav-item">
          <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary">Other Confs</button>
            <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">CSS Conf</a></li>
              <li><a class="dropdown-item" href="#">Python Conf</a></li>
              <li><a class="dropdown-item" href="#">Java Conf</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">Swift Conf</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
      <div class="col-md text-md-right">
        <small>&copy; 2017 Full Stack Conf &amp; Treehouse</small>
      </div>
    </div><!--  /footer  -->

 </div><!-- /.container -->



        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
      </body>
</html>

3 Answers

Samuel Weirton
Samuel Weirton
6,945 Points

Bootstrap 5 is a bit different. Here's a snippet of the code I used to follow along:

  <div class="row py-3">
    <div class="col-md-7">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Community</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Tracks</a>
        </li>
        <li class="nav-item">
          <div class="btn-group dropup">
            <button type="button" class="btn btn-outline-secondary">Other Confs</button>
            <button type="button" class="btn btn-outline-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 text-md-right">
      <small>&copy; 2017 Full Stack Conf &amp; Treehouse</small>
  </div>
Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Try removing the list parts of your code for the dropdown menu and wrap the anchor elements into a <div> element with the class of dropdown-menu.

Joshua Munoz
Joshua Munoz
Courses Plus Student 7,794 Points
Joshua Munoz
Joshua Munoz
Courses Plus Student 7,794 Points

That didn't fix the problem, I'm not sure what else it could be. Could it possibly be a problem with Bootstrap versions conflicting? Here's how I changed the code:

<!--  footer  -->
<div class="row py-3">
    <div class="col-md-7"> 
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="#">Community</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Tracks</a>
        </li>
        <li class="nav-item">
          <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary">Other Confs</button>
            <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
            </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 text-md-right">
        <small>&copy; 2017 Full Stack Conf &amp; Treehouse</small>
      </div>
    </div><!--  /footer  --
Timothy Andes
Timothy Andes
7,897 Points
Timothy Andes
Timothy Andes
7,897 Points

I got mine to work by going to Bootstrap > Getting Started > Download and copying these two <script> lines and replacing the three that were provided for the project. I don't know how this will affect the remaining tutorials, but it fixes the split menu issue for this lesson.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>