Bootstrap 4 Dropdowns, How To Learn Bootstrap 4 Dropdowns Tutorial

Bootstrap 4 Tutorial

Bootstrap 4 Dropdowns

A Bootstrap dropdown menu is a toggleable menu, Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin. The JavaScript is included with the default Bootstrap JS file and you can use it simply by adding the CSS classes.

<h4> Button Dropdown : <button> </h4>
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button>
  <div class="dropdown-menu" aria-labelledby="dropdownButton">
    <a class="dropdown-item" href="#">HTML5</a>
    <a class="dropdown-item" href="#">CSS3</a>
    <a class="dropdown-item" href="#">Bootstrap</a>
  </div>
</div>

<hr />

<h4> Link Dropdown : <a> </h4>
<div class="dropdown show">
  <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a>

  <div class="dropdown-menu" aria-labelledby="dropdownLink">
    <a class="dropdown-item" href="#">HTML5</a>
    <a class="dropdown-item" href="#">CSS3</a>
    <a class="dropdown-item" href="#">Bootstrap</a>
  </div>
</div>

Output :

Dropdown Buttons

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Free Time Learn</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">HTML5</a>
    <a class="dropdown-item" href="#">CSS3</a>
    <a class="dropdown-item" href="#">Bootstrap</a>
  </div>
</div>

Split Dropdown Buttons

Bootstrap split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.

We use this extra class to reduce the horizontal padding on either side of the caret by 25% and remove the margin-left that’s added for regular button dropdowns.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">HTML5</a>
    <a class="dropdown-item" href="#">CSS3</a>
    <a class="dropdown-item" href="#">Bootstrap</a>
  </div>
</div>

Dropup variation

Dropup menus elements by adding .dropup to the parent element.

<div class="btn-group dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdup button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">HTML5</a>
      <a class="dropdown-item" href="#">CSS3</a>
    </div>
</div>
  
<div class="btn-group dropup">
  <button type="button" class="btn btn-primary">
    Split dropup
  </button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">HTML5</a>
    <a class="dropdown-item" href="#">CSS3</a>
  </div>
</div>

Dropdown Header

The .dropdown-header class is used to add headers inside the dropdown menu.

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown
    </button>
    <div class="dropdown-menu">
      <h6 class="dropdown-header">Front End</h6>
      <a class="dropdown-item" href="#">HTML5</a>
      <a class="dropdown-item" href="#">CSS3</a>
      <a class="dropdown-item" href="#">JavaScript</a>
    </div>
</div>

Dropdown Divider

The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal border.

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">HTML5</a>
      <a class="dropdown-item" href="#">CSS3</a>
	  <div class="dropdown-divider"></div>
	  <a class="dropdown-item" href="#">JavaScript</a>
    </div>
</div>

Active and Disable items

Active : Highlight a specific dropdown item with the .active class (adds a blue background color).

Disable : Add .disabled to items in the dropdown to style them as disabled.

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Tutorials
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item active" href="#">HTML5</a>
      <a class="dropdown-item" href="#">CSS3</a>
	  <a class="dropdown-item disabled" href="#">JavaScript</a>
	  <a class="dropdown-item" href="#">jQuery</a>
    </div>
</div>

Bootstrap 4 Tutorial