The Dropdown in Bootstrap 4

The Bootstrap 4 dropdown component may contain the list of links and more that can be used as contextual menus, in navbars etc. The dropdown menu can be opened by a clicking on a button or link (also split buttons) and these are toggleable.

An example of contextual menu usage can be using the dropdown menu in a textarea with different editing options. Similarly, using this in an editable table for adding/deleting or updating records.

In the navbars, the dropdowns can be used for containing a list of links for certain category etc. See the following section for learning how to create the dropdown component independently and in other components in Bootstrap 4.

A simple example of button dropdown

Let me start with a simple example of creating a dropdown by using a <button> tag with .btn and a contextual class.

The button is toggleable and as you click this, it will open the list of links. First, have a look at the demo and I will explain how it worked:

Bootstrap 4 btn dropdown

See online demo and code

The markup for this demo:

So, how this example worked?

First of all, you need to include the Bootstrap CSS, jQuery, popper.js and Bootstrap JS files. If you have worked with previous versions of Bootstrap (or specifically Bootstrap 3 dropdowns) then you already familiar with three files inclusion except for the Popper.js (or Popper.min.js).

You may see all CDN links in the <head> section of the example page.

The Popper.js file is used to provide the dynamic positioning and viewport detection. You must include this before Bootstrap.js file.

In the mark up section, a <div> is given the .dropdown class that contains button and links markup.

The button is created by standard .btn class along with contextual class and .dropdown-toggle class. The last class adds an arrow in the button. If you omit this, the dropdown still works.

Besides, you can also see three data attributes in the <button> i.e. data-toggle=”dropdown”, aria-haspopup=”true” and aria-expanded=”false”.

Next <div> is given the .dropdown-menu class that contains links for button dropdown menu. This <div> is linked by aria-labelledby which value is equal to the ID of button.

The <a> tags are given the .dropdown-item item class.

The example of link dropdown

As mentioned earlier, you may also create a link dropdown rather than a button. See the example below with code:

Bootstrap 4 dropdown link

See online demo and code

The HTML code:

Dropping the menu links upward example

By default, as you click the button or link dropdown, the menu opens in downward direction. You may also open this in other directions.

For that, simply add the .dropup class in the main div element that contains button.

dropdown button dropup

See online demo and code

Only this line of code is changed than the first dropdown menu example:

<div class=”dropdown dropup”>

Similarly, you may open the menu towards left or right by using dropleft and dropright classes, respectively. The above markup will be:

For left drop:

<div class=”dropdown dropleft”>

For right drop:

<div class=”dropdown dropright”>

Using buttons for menu items rather links example

This is another difference between the Bootstrap 3 dropdowns that version 4 allows using the <button> tags for creating menu items rather than just the link <a> tags as used in above examples.

In the following examples, the <button> tags are used as link items markup:

dropdown button menu items

See online demo and code

The example markup:

Creating split button dropdown menu

You may also create split button dropdown by using another <button> and specifying .dropdown-toggle-split class.

In this example, the dropdown opens as you click on the split button (the button towards right with an arrow) while the first button is given the caption.

dropdown split button

See online demo and code

The code:

Opening dropdown as any button is clicked example

You may also display the dropdown menu by using both buttons in case you are using split button. In the above example, the dropdown menu opened for right split button while nothing happened as you press the button with text.

In this example,  both buttons display the dropdown menu:

dropdown both split

See online demo and code

Only this piece of code is added in the first button markup:

See the complete code in the demo page.

Multi-colored dropdown buttons demo

By using the contextual classes of the buttons in Bootstrap 4, you may create beautiful looking dropdown buttons in various colors. Following built-in contextual classes can be used for styling the buttons:

  • btn-primary
  • btn-secondary
  • btn-success
  • btn-info
  • btn-light
  • btn-dark
  • btn-danger
  • btn-warning

See the following example where I used all these button contextual classes for creating the dropdowns:

dropdown contextual button

See online demo and code

The demo of creating outline style button dropdowns

Similarly, you may use the .outline classes of the buttons for creating dropdowns without background colors initially. These are buttons with bordered style and as you bring the mouse over, it displays the context background color.

The following outline classes can be used that are built-in in Bootstrap 4:

  • btn-outline-warning
  • btn-outline-danger
  • btn-outline-dark
  • btn-outline-light
  • btn-outline-info
  • btn-outline-success
  • btn-outline-secondary
  • btn-outline-primary

Have a look at this demo where I used all these classes:

dropdown contextual outline

See online demo and code

The example markup for .btn-outline-danger class:

You may grab the complete code from the example page.

A few more styles for split buttons

Now, see various combinations for the split button styles for dropdowns – all created by using built-in button classes.

dropdown split styles

See online demo and code

Two of the button’s markup:

See the code of all styles in the example page. Only first button’s code contains dropdown menu links.

Various size dropdown examples

Extending the above example, now see the various sizes of buttons – again by using the following built classes for buttons in BS4:

  • btn-lg //for large size
  • btn-sm //for small size

Bootstrap dropdown sizes

See online demo and code

The code of first three buttons with all sizes:

See the code of all 12 buttons in the demo page’s code sections.

Place dividers between menu items

You may require differentiating certain menu items from the others. For that, you may use the .dropdown-divider class for adding a separator line:

Bootstrap dropdown divider

See online demo and code

The markup for this demo:

Adding headings in the dropdown menu

Use the .dropdown-header class for creating the headers in the menu:

Bootstrap dropdown headers

See online demo and code

The markup for heading:

    <h6 class=”dropdown-header”>Programming Languages</h6>

See the output and code in the example page.

Display a form in dropdown

Well, you may virtually display any other content in the Bootstrap dropdown component. For example, display a form as the “Subscribe” button is pressed, otherwise, form is not visible.

In the following demo, a simple form is used that displays as the button is pressed:

Bootstrap dropdown form

See online demo and code

The code:

The demo of using button dropdown in navbar

The following example uses button dropdown in the navigation bar. You may copy the complete code from the demo page and paste in your IDE and run at your own system for full screen view.

Bootstrap dropdown navbar

See online demo and code

The code:

Complete code in  example page.