Holla Tech - Learn
Bootstrap 3: Dropdowns
 

A dropdown menu allows the user to choose one value from a predefined list which drops down on clicking.

To create a basic Bootstrap dropdown:
1. Create a <div> element with dropdown class.
2. Create a <button> element with dropdown-toggle class and data-toggle=”dropdown” attribute so that the dropdown menu opens on clicking it.
3. Create a <span> element with caret class within the <button> element to display a caret arrow icon.
4. Create a <ul> element with dropdown-menu class to define the dropdown options.

Additional styling can be added with these classes for the <li> elements of the <ul> element.
divider Adds a divider.
dropdown-header Adds a header.
active Adds an enabled dropdown item.
disabled Adds a disabled dropdown item.

The following code displays a Bootstrap dropdown menu: 

<div class=“container”>
  <div class=dropdown>
    <button class=“btn btn-primary dropdown-toggle data-toggle=“dropdown”>Languages
    <span class=caret></span></button>
    <ul class=dropdown-menu>
      <li>English</li>
      <li>Spanish</li>
      <li class=divider></li>
      <li class=dropdown-header>Coding</li>
      <li>C++</li>
      <li>Java</li>
    </ul>
  </div>
</div> 

 

TASK:
Test the line of codes using a text editor and play around with the outputs. 

BACK NEXT

CLICK ON THE BUTTON BELOW TO RETURN TO THE BOOTSTRAP 3 MAIN COURSE PAGE. 

BOOTSTRAP 3 MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT