<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><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>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 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>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>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 : 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>