1.

Dropdowns - Bootstrap

Answer»

Dropdowns are toggleable, contextual overlays that display lists of links and more. They allow the user to choose one value from a predefined list.

Example:



Dropdown button for bootstrap


Bootstrap cheatsheet
Bootstrap 5 cheatsheet
Bootstrap 4 cheatsheet

 

 <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button for bootstrap
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Bootstrap cheatsheet</a>
<a class="dropdown-item" href="#">Bootstrap 5 cheatsheet</a>
<a class="dropdown-item" href="#">Bootstrap 4 cheatsheet</a>
</div>
</div>
dropdown Using this class, you can add a dropdown to the navbar, tabs, and pills so that you can display additional navigation. <div class="dropdown"><button class="btn btn-secondary dropdown-toggle" type="button" id="1″ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Bootstrap Dropdown Button</button><div class="dropdown-menu" aria-labelledby="1″><a class="dropdown-item" href="#!">Bootstrap Link1</a><a class="dropdown-item" href="#!">Bootstrap Link2</a></div></div>
dropright dropright is used to display the dropdown menu on the right side. <div class="dropdown dropright">
dropleft dropleft is used to display the dropdown menu on the left side.  <div class="dropdown dropleft">
dropdown-header Dropdown-header is used to add headers inside the dropdown menu. <li class="dropdown-header">Dropdown header A</li>
dropdown-divider Dropdown-divider creates a thin horizontal border between links to separate them.  <div class="dropdown-divider"></div>
dropdown-menu-rightAdds the default styles for the dropdown menu container. <div class="dropdown-menu dropdown-menu-right">


Discussion

No Comment Found

Related InterviewSolutions