Bootstrap > Dropdown

Dropdown with javascript in Bootstrap

How to create dropdown with javascript in Bootstrap?


Dropdown with javascript

We can create drop down using javscript 

<div class="container">
  <h2>Dropdown Example</h2>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">SN ITFunda
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">DotNetFunda</a></li>
      <li><a href="#">TechFunda</a></li>
      <li><a href="#">ITFunda</a></li>
      <li class="divider"></li>
      <li><a href="#">KidsFunda</a></li>    
    </ul>
  </div><br>
</div>
<script>
    $(document).ready(function () {
        $(".dropdown-toggle").dropdown();
    });
</script>

  • In the above code snippet we have defined the dropdown, we have created button with class value dropdown-toggle and data-toggle as dropdown
  • In the next line we have <ul> elements with class value as dropdown-menu to define the list values 
  • In the script function we have $(".dropdown-toggle").dropdown();- dropdown-toggle calls the body function to dropdown value 

output

 Views: 3873 | Post Order: 28



Write for us






Hosting Recommendations