Bootstrap 4 Dropdowns

Bootstrap 4 Dropdowns

Learn How to Work With Bootstrap 4 Dropdowns

 

Bootstrap 4 Button Elements

Bootstrap 4 Dropdown menus

Bootstrap4 dropdown can be created using class .dropdown and including within it both the dropdown tigger icon and dropdown menu

<!-- Class dropdown creates a dropdown menu -->
<div class="dropdown open">
  <button class="btn btn-success dropdown-toggle" type="button" id="dropdown_1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Operating Systems
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdown_1">
    <a class="dropdown-item" href="#">Mac OS X</a>
    <a class="dropdown-item" href="#">Windows 10</a>
    <a class="dropdown-item" href="#">Linux</a>
  </div>
</div>

 

Bootstrap 4 Dropdown : Button Elements

Instead of using element <a> to contain menu items, you can even use <button>

bootstrap 4 Dropdown

 

<div class="dropdown open">
  <button class="btn btn-danger dropdown-toggle" type="button" id="dropdown_1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Mobile OS
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdown_1">
  <!-- Element <button> instead of <a> -->
    <button class="dropdown-item " type="button">Android</button>
    <button class="dropdown-item " type="button">iOS</button>
    <button class="dropdown-item " type="button">Blackberry</button>
  </div>
</div>

 

Bootstrap 4 Dropdown : Menu Headers

Dropdown Menus can be assigned Header labels using element <h1-h6> , to create categories.

Bootstrap 4

<div class="dropdown open">
  <button class="btn btn-danger dropdown-toggle" type="button" id="dropdown_1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Countries
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdown_1">
  <h5 class="dropdown-header">Asia</h5>  <!-- Header 1-->
    <button class="dropdown-item " type="button">China</button>
    <button class="dropdown-item " type="button">India</button>
    <button class="dropdown-item " type="button">Japan</button>
  
  <h5 class="dropdown-header">Europe</h5> <!-- Header 2-->
    <button class="dropdown-item " type="button">France</button>
    <button class="dropdown-item " type="button">Germany</button>
    <button class="dropdown-item " type="button">England</button>
  </div>
</div>

 

Bootstrap  4 Dropdown Menu Dividers

Bootstrap 4

To Add a seperator between multiple menu items use class .dropdown-divider, it creates a single horizontal line seperation

<div class="dropdown open">
  <button class="btn btn-warning dropdown-toggle" type="button" id="dropdown_1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Operating Systems
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdown_1">
  <a class="dropdown-item" href="#">Linux</a>
  <a class="dropdown-item" href="#">Microsoft</a>
  <a class="dropdown-item" href="#">Mac OS X</a>
  <div class="dropdown-divider"></div> <!-- class="dropdown-divider" -->
  <a class="dropdown-item" href="#">More..</a>
  </div>
</div>

 

Bootstrap 4 Dropdown : Disabled Menu Items

Bootstrap 4

To disable one or multipe menu items use class .disabled

 

<div class="dropdown open">
  <button class="btn btn-warning dropdown-toggle" type="button" id="dropdown_1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Operating Systems
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdown_1">
  <a class="dropdown-item disabled" href="#">Linux</a> <!-- class="disabled" -->
  <a class="dropdown-item " href="#">Microsoft</a>
  <a class="dropdown-item" href="#">Mac OS X</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">More..</a>
  </div>
</div>

 

Thank You for visit Webriceter.com Design & Develop by Abdur Rahaman