CODEWITHSUNDEEP
drop-down-menubootstrapping
Ryan Abarquez
Ryan Abarquez

Reputation: 307

How to Create a Bootstrap Dropdown?

What seems to be the problem with my code... I am new in bootstrap, I followed all the instruction on the site how to create a bootstrap dropdown but still there there are no dropdown items displaying on my dropdown

My code:

//Calling Bootstrap CSS and Javascript

  <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="screen" >
  <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css" media="screen" >
  <link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css" media="screen" >
  <script src="js/bootstrap.js"></script>
  <script src="js/bootstrap.min.js"></script>


 <script>
 $('.dropdown-toggle').dropdown()
 </script>

<div class="btn-group">
  <button type="button"  class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Thanks for your help

Upvotes: 0

Views: 2039

Answers (1)

Rajesh
Rajesh

Reputation: 24915

First jQuery is missing.

Second, you are calling $('.dropdown-toggle').dropdown() before DOM is rendered.

Also, you should load only 1 file. Either bootstrap.css or bootstrap.min.css. Loading both is just wasting resources.

JSFiddle

$('.dropdown-toggle').dropdown()
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"></link>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Upvotes: 2

Related Questions