Twitter Bootstrap Question posted in

Twitter-Bootstrap V4 navbar dropdown missing styling – Twitter bootstrap

Currently, it appears that V4 has no documentation on using navbar dropdowns. Following the the V3 docs, the navbar on V4 does drop down on click, but appears to be unstyled. How can I get the dropdown to appear properly as shown in the V3 docs? I’m assuming that the css selector has changed; if that’s the case, how would I go about finding the new undocumented selector?

This is what it currently looks like with V3 classes on the V4 library:

Bootstrap navbar dropdown unstyled

The HTML used:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</head>

<body>
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <a class="navbar-brand" href="/">HelloWorld</a>
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false">1<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Map</a></li>
                <li><a href="#">Grid</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false">2<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Map</a></li>
                <li><a href="#">Grid</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false">3<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Map</a></li>
                <li><a href="#">Grid</a></li>
            </ul>
        </li>
        <li class="nav-item"><a class="nav-link" href="">Test</a></li>
    </ul>
    <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item"><a class="nav-link" href="">Logout </a></li>
    </ul>
</nav>
</body>
</html>
Tags:

2

Answers


  1. 0

    You are using
    <li> and <ul> whereas the documentation suggests to use <div> and <a> tags instead

        <div class="dropdown">
      <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        1
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <button class="dropdown-item" type="button">Action</button>
        <button class="dropdown-item" type="button">Another action</button>
        <button class="dropdown-item" type="button">Something else here</button>
      </div>
    </div>

    Edit: Fiddle for reference

    Edit2: Ok so u missed the classes btn and btn-success. Also add css rule

    .dropdown { display:inline-block;}

    Edit3: Fiddle Link: Dropdown 1 with <a> instead of <button>

    Login or Signup to reply.
  2. 0

    Try below:

    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<div class="container-fluid">
  <a class="navbar-brand" href="/">HelloWorld</a>
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">1<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Map</a></li>
          <li><a href="#">Grid</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">2<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Map</a></li>
          <li><a href="#">Grid</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">3<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Map</a></li>
          <li><a href="#">Grid</a></li>
        </ul>
      </li>
      <li class="nav-item"><a class="nav-link" href="">Test</a></li>
    </ul>
    <ul class="nav navbar-nav pull-xs-right">
      <li class="nav-item"><a class="nav-link" href="">Logout </a></li>
    </ul>
  </div>
</div>

    Working Plnkr: Plnkr

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search