CODEWITHSUNDEEP
javascripttwitter-bootstraptwitter-bootstrap-3navbardropdown
Scott_McAlister
Scott_McAlister

Reputation: 7

How to fix dropdown button inside a Navbar - bootstrap?

Issue with activating a dropdown in my navbar.

I'm installing a navbar on my website, one selection for which will include a dropdown. Everything appears fine, but when I click on the dropdown, nothing comes up.

added most of the code for the front page for better insight.

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset="utf-8">
    <title>CDC Tuberculosis Infection Control Toolkit</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="Content/bootstrap.min.css" rel="stylesheet">

    <script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="jumbotron text-center">
            <h1>CDC Tuberculosis Infection Control Toolkit</h1>
        </div>
        <hr>
        <nav class="navbar navbar-inverse">
          <div class="container-fluid">
            <div class="navbar-header">
            </div>
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Foreword</a></li>
              <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Toolkit Curriculum
                <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Engineering Controls</a></li>
                  <li><a href="#">Administrative Controls</a></li>
                  <li><a href="#">Respiratory Controls</a></li>
                </ul>
              </li>
              <li><a href="#">Abbreviations</a></li>
              <li><a href="#">Glossary</a></li>
            </ul>
          </div>
        </nav>
        </div>
        <br>
        <div class="content col-md-12">
            <div class="col-md-2">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Active</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-10">
                <div class="material">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Atqui iste locus est, Piso, tibi etiam atque etiam confirmandus, inquam; Duo Reges: constructio interrete. Vitae autem degendae ratio maxime quidem illis placuit quieta. Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Quis non odit sordidos, vanos, leves, futtiles? Ne discipulum abducam, times. De hominibus dici non necesse est. Quod autem ratione actum est, id officium appellamus. Quid, si etiam iucunda memoria est praeteritorum malorum?

                    Quis Pullum Numitorium Fregellanum, proditorem, quamquam rei publicae nostrae profuit, non odit? Quid Zeno? Est enim tanti philosophi tamque nobilis audacter sua decreta defendere. Illa tamen simplicia, vestra versuta. Sin autem est in ea, quod quidam volunt, nihil impedit hanc nostram comprehensionem summi boni. Istam voluptatem, inquit, Epicurus ignorat?

                    Progredientibus autem aetatibus sensim tardeve potius quasi nosmet ipsos cognoscimus. Haec et tu ita posuisti, et verba vestra sunt. Iam in altera philosophiae parte. Non est enim vitium in oratione solum, sed etiam in moribus. Si verbum sequimur, primum longius verbum praepositum quam bonum. Eaedem res maneant alio modo. Primum quid tu dicis breve? Quamquam haec quidem praeposita recte et reiecta dicere licebit. Sed ne, dum huic obsequor, vobis </p>


</body>
</html>

Upvotes: 0

Views: 71

Answers (1)

IvanS95
IvanS95

Reputation: 5732

You are importing two versions of Bootstrap, and also you are not importing jQuery, which Bootstrap is dependent on. Testing your code, the version of Bootstrap you should be using is v3.3.7, NOT Bootstrap 4 as you tagged, this has to match with bootstrap.js as well.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang=en>

<head>
  <meta charset="utf-8">
  <title>CDC Tuberculosis Infection Control Toolkit</title>

</head>

<body>
  <div class="container-fluid">
    <div class="jumbotron text-center">
      <h1>CDC Tuberculosis Infection Control Toolkit</h1>
    </div>
    <hr>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Foreword</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Toolkit Curriculum
                <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Engineering Controls</a></li>
              <li><a href="#">Administrative Controls</a></li>
              <li><a href="#">Respiratory Controls</a></li>
            </ul>
          </li>
          <li><a href="#">Abbreviations</a></li>
          <li><a href="#">Glossary</a></li>
        </ul>
      </div>
    </nav>
  </div>
  <br>
  <div class="content col-md-12">
    <div class="col-md-2">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
    <div class="col-md-10">
      <div class="material">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Atqui iste locus est, Piso, tibi etiam atque etiam confirmandus, inquam; Duo Reges: constructio interrete. Vitae autem degendae ratio maxime quidem illis placuit quieta. Quae hic rei publicae
          vulnera inponebat, eadem ille sanabat. Quis non odit sordidos, vanos, leves, futtiles? Ne discipulum abducam, times. De hominibus dici non necesse est. Quod autem ratione actum est, id officium appellamus. Quid, si etiam iucunda memoria est
          praeteritorum malorum? Quis Pullum Numitorium Fregellanum, proditorem, quamquam rei publicae nostrae profuit, non odit? Quid Zeno? Est enim tanti philosophi tamque nobilis audacter sua decreta defendere. Illa tamen simplicia, vestra versuta.
          Sin autem est in ea, quod quidam volunt, nihil impedit hanc nostram comprehensionem summi boni. Istam voluptatem, inquit, Epicurus ignorat? Progredientibus autem aetatibus sensim tardeve potius quasi nosmet ipsos cognoscimus. Haec et tu ita
          posuisti, et verba vestra sunt. Iam in altera philosophiae parte. Non est enim vitium in oratione solum, sed etiam in moribus. Si verbum sequimur, primum longius verbum praepositum quam bonum. Eaedem res maneant alio modo. Primum quid tu dicis
          breve? Quamquam haec quidem praeposita recte et reiecta dicere licebit. Sed ne, dum huic obsequor, vobis </p>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 2

Related Questions