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 Framework Basics Prototyping with Bootstrap Build a Dropdown Menu

Posted by Ary de Oliveira
Ary de Oliveira
28,298 Points

CSS fRAMEWORK bASICS

Challenge Task 4 of 4

Finally, create a divider above the Plans & Pricing navigation link.

I can not see my mistake. need help

index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Ribbit - A Treehouse Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
  </head>
  <body>

    <!-- Navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand text-muted" href="#">Ribbit</a>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About Ribbit</a></li>
            <li class="dropdown">
              <a data-toggle="dropdown" data-target="#">Treehouse<b class="caret"></b></a>
              <ul class="dropdown-menu">
              <ul>
       <li><a href="#">About Treehouse</a></li>
       <li><a href="#">Video Library</a></li>
       <li><a href="#">Learning Adventures</a></li>
                <div>
       <li class="divider"></li>
                </div>
       <li><a href="#">Plans &amp; Pricing</a></li>
       </ul>
    </ul>
            </li>
          </ul>
        </div>
      </div>
    </div><!-- End navbar -->

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
Ary de Oliveira
Ary de Oliveira
28,298 Points

so one minute I'll download google chrome, let's see

3 Answers

Saskia Lund
Saskia Lund
5,673 Points

Hi Ary!

The challenge asks you to use Bootstrap components to solve tasks. To add a divider that is visually located above the Plans & Pricing list item you need to add a certain bootstrap list item class (defined by bootstrap.css) to it. Like so:

<li role="separator" class="divider"><a href="#">Plans &amp; Pricing</a></li>

Remove the additionl separator-div-code, that you added.

You can find all Bootstrap components here: http://getbootstrap.com/components/#dropdowns-divider

Hope this was helpful.

Saskia

Ary de Oliveira
Ary de Oliveira
28,298 Points

I did research, i add your code but not, still not works, do not understand ...

i am try customize and download bootstrap ...

you tried to solve the code did have try?

Ary de Oliveira
Ary de Oliveira
28,298 Points

<li role="separator" class="divider"><a href="#">Plans & Pricing</a></li> / i try but no work sorry

i am nerd

Saskia Lund
Saskia Lund
5,673 Points

Well I just solved the challenge a minute ago. Have a look here: https://www.saskialund.de/wp-content/uploads/201509265_1209-Screenshot.png

The above is the answer...

Set up your code like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Ribbit - A Treehouse Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
  </head>
  <body>

    <!-- Navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand text-muted" href="#">Ribbit</a>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About Ribbit</a></li>
            <li class="dropdown">
              <a data-target="#" data-toggle="dropdown">Treehouse<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">About Treehouse</a></li>
                <li><a href="#">Video Library</a></li>
                <li><a href="#">Learning Adventures</a></li>
                <li role="separator" class="divider"><a href="#">Plans &amp; Pricing</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div><!-- End navbar -->

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Make sure to not add anything else to the code! No additional weird div separators, please!!

Ary de Oliveira
Ary de Oliveira
28,298 Points

Good Girl ..... Best Answer

Ary de Oliveira
Ary de Oliveira
28,298 Points

Thanks to Saskia Lund and the entire team that helped solve Task.

Best Answer to Saskia Lund

<li role="separator" class="divider"><a href="#">Plans & Pricing</a></li>

Remove the additionl separator-div-code, that you added.

You can find all Bootstrap components here: http://getbootstrap.com/components/#dropdowns-divider

Saskia Lund
Saskia Lund
5,673 Points

:D

Thanks, Ary! You are most welcome.

Glad it could be solved!

Have fun learning with Teamtreehouse.com

Saskia

Mikkel Rasmussen
Mikkel Rasmussen
31,772 Points
Mikkel Rasmussen
Mikkel Rasmussen
31,772 Points

The divider should be in a div not a li and you have added a ul to much.

<!DOCTYPE html>
<html>
  <head>
    <title>Ribbit - A Treehouse Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
  </head>
  <body>

    <!-- Navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand text-muted" href="#">Ribbit</a>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About Ribbit</a></li>
            <li class="dropdown">
              <a data-toggle="dropdown" data-target="#">Treehouse<b class="caret"></b></a>
              <ul class="dropdown-menu">
       <li><a href="#">About Treehouse</a></li>
       <li><a href="#">Video Library</a></li>
       <li><a href="#">Learning Adventures</a></li>
       <div class="divider"></div>
       <li><a href="#">Plans &amp; Pricing</a></li>
       </ul>
            </li>
          </ul>
        </div>
      </div>
    </div><!-- End navbar -->

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
Saskia Lund
Saskia Lund
5,673 Points

The Code in that challenge is correct, Mikkel. There are a few more ul tags used that need the closing tags, you deleted.

For further info, please check out Bootstrap here: http://getbootstrap.com/components/

Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

Ul was already contained in the proposal of the problem, I do not have added that.

Have You tried to task?