Bootstrap Basic Dropdown

It is well known that dropdown menu is basically a list of toggleable options from which you can choose anyone.

The basic dropdown menu in Bootstrap can be created using below code:

    Dropdown Example
        
    

        
HTML
        
CSS
        
JavaScript
    

• The basic contextual class for dropdown menu in Bootstrap is the .dropdown class
• For a working dropdown you basically need a button with class .dropdown-toggle along with the attribute data-toggle=”dropdown”
• Use the .caret class to put an arrow icon on the dropdown button. This icon is to indicate that the button is acting as a dropdown. You can also use .caret.caret-up for “dropup” menus (to be discussed later)
• The dropdown ‘menu’ part can be built by using .dropdown-menu class to a <ul> element

Bootstrap Dropdown Divider

A horizontal thin border can be added to separate some menu items in the dropdown menu using the .divider class, like:

Bootstrap Dropdown Header

Use the .dropdown-header contextual class to add headers for the dropdown menu. The sample code:

Dropdown header 1

Bootstrap Disable and Active items

The .active class adds a blue background color that can be used to highlight the selected option from the drop-down. Similarly, you can disable an item in the dropdown menu using the .disabled class. The .disabled class will basically get a light-grey text color along with a “no-parking-sign” icon for hover event. Observer the below code for better understanding:

CSS
HTML

Bootstrap Dropdown Position

The horizontal alignment of the dropdown can be done using contextual class .dropdown-menu-right class. You add this class to the dropdown element with .dropdown-menu:

Bootstrap Dropup

You can also make the dropdown menu to expand upwards.

Using class= “dropup” attribute will make the dropdown menu open in upward direction instead of downwards.

For example:

Via data-* Attributes

An alternative way of creating dropdown in Bootstrap is by using the data-* class.

Here, the attribute data-toggle="dropdown" can be added to a link or a button to make it toggle a dropdown menu.

Dropdown Example

Bootstrap Dropdown Methods

Bootstrap 4 has only one method for the .dropdown class which is:

• .dropdown(“toggle”)

The method basically just makes sure that the dropdown is toggle-able

Bootstrap Dropdown Events

Here’s a list of events provided by bootstrap for the dropdown menu element:

• bs.dropdown: The event for the dropdown when it is just about to be shown
• bs.dropdown: The event for the dropdown when it is fully visible and the CSS transitions are also completed.
• bs.dropdown: The event for the dropdown when it is just about to be hidden
• bs.dropdown: The event for the dropdown when it is fully hidden and the CSS transitions are also completed.

Bootstrap Dropdown Contextual Classes

Here’s a list of all the contextual classes used with the dropdown element:

• .dropdown
• .dropdown-menu
• .dropdown-menu-right
• .dropdown-header
• .dropup
• .disabled
• .divider

The post Bootstrap Dropdowns appeared first on Ebhor.com.