Bootstrap 4 Dropdowns

Bootstrap 4 dropdowns are the toggleable elements to display a list of links on mouse clicks. It is useful to create a dropdown menu using the toggleable buttons and links. The menus contain a list of links that users have to select or choose.

Let’s find out how to create dropdowns with the examples given below.

Single Button Dropdown in Bootstrap 4

To create a simple dropdown element on button click, you have to use the <button> element with class .dropdown-toggle and attribute data-toggle="dropdown". After that, create a list of links using the class .dropdown-item with each <a> elements and place them inside the class .dropdown-menu.

Now, wrap everything inside the class .dropdown to create the dropdowns as given below:

Output

When you click the above button, it displays the list of links that you can select to open the respected page.

Create Single Anchor Link Dropdown

Similarly, you can create anchor links dropdown by using the <a> element in place of the <button> element as given below:

Output

The above example shows the anchor links button to create Bootstrap 4 dropdowns.

Button Dropdowns Using Contextual Classes in Bootstrap 4

You can style the dropdowns using the contextual classes of Bootstrap 4. The dropdown variants are as given below:

Output

The above examples show 6 variations of dropdowns that can use as per your requirements.

Split Button Dropdown in Bootstrap 4

A split button is a button that contains the text content and an arrow that displays the list of links on mouse click. You can create a split button as given in the example below:

Output

The above example shows the split button where the left-hand side shows the text content while the right side displays the list of links on click. To open the list of links, you have to click the arrow given in the button.

Create Split Button Dropdowns Using Contextual Classes

As you have created the contextual dropdowns with a normal button. You can also create the different styling split dropdown buttons using the contextual classes as given below:

Output

The above example shows the 6 different stylings of split buttons using Bootstrap 4.

Sizing Dropdowns in Bootstrap 4

You can increase or decrease the sizes of dropdown buttons in Bootstrap 4. To increase the dropdown size, you have to use the class .btn-lg to the <button> element. For making the button small, you have to use the class .btn-sm to the <button> element as given below:

Output

The above example shows the normal dropdown and split dropdown into large and small sizes.

Set Directions of Dropdown Menus in Bootstrap 4

The directional dropdown menus are useful to set the position of the menu to open on mouse click. Let’s find out different classes that are useful to set the direction of dropdown menus.

Dropup Direction Menu

To set the direction to the up direction, you have to use the class .dropup to the <div> element that contains the class .btn-group as given below:

Output

The above example shows the normal dropdown and split dropdowns that display the menu to the up direction on mouse click.

Dropright Direction Menu

To set the direction to the right direction, add the class .dropright to the <div> element that contains the class .btn-group as given below:

Output

The above example shows the normal dropdown and split dropdowns that open the list of links in the right direction when someone clicks the mouse.

Dropleft Direction Menu

To set the direction to the left direction, you can use the class .dropleft to the <div> element that contains the class .btn-group as given below:

Output

The above example contains the normal dropdown and the split dropdown that displays the menus in the right direction on button click.

Active and Disabled Dropdown Menu Items

You can make the active and disabled menu items in Bootstrap 4. To create the active links in the menus, you have to use the class .active. For creating a disabled button, you have to use the class .disabled as given below:

Output

When you click the above button, you will get the links that contain the active and the disabled links.

Right Aligned Dropdown Menus in Bootstrap 4

The right-aligned dropdown menu is the dropdown that displays the menu to the right side. To create a right-aligned dropdown menu, you have to add the class .dropdown-menu-right to the <div> element that contains the class .dropdown-menu as given below:

Output

Responsive Right-aligned Dropdown Menus

The responsive right-aligned dropdown menu aligns the menu to the right side on mouse click according to the specified screen sizes. You have to use the class .dropdown-menu-{sm|md|lg|xl}-right to the <div> element that contains the class .dropdown-menu as given below:

Output

Add Header to Dropdown Menus in Bootstrap 4

You can add a header to the dropdown menu that is useful to define the purpose of the links. To create a header in the dropdown menu, you have to use the class .dropdown-menu as given below:

Output

Dividers in Dropdown Menus

The divider separates the links from other links in a dropdown. To separate a link from other links in a dropdown, you have to use the class .dropdown-divider as given below:

Output

Dropdown Menu with Text

You can add text content to the dropdown menu that is useful to describe something on dropdowns. To create text content in the menu, you have to use the class .dropdown-item-text and place the content inside it as given below:

Output

Form in Dropdown Menus in Bootstrap 4

The forms are useful in dropdowns to get the input from users and the required data to grow your websites. You can easily add the forms to your website in place of links in dropdown menus as given below:

Output

The above example contains a form and the list of links in dropdown menus in Bootstrap 4.