How to Create a Bootstrap 4 Multiselect Dropdown: Complete Implementation Guide

Bootstrap 4 does not include a native multiselect dropdown component, so you must either write custom JavaScript to toggle the active class on .dropdown-item elements and sync with a hidden <select multiple>, or use the third-party bootstrap-select plugin which extends Bootstrap's dropdown engine.

Bootstrap 4 provides a robust dropdown system for single-selection menus, but creating a Bootstrap 4 multiselect dropdown requires additional implementation. Since the core library's dropdown.js only handles toggle visibility and keyboard navigation, developers must layer multiselect logic on top of Bootstrap's foundation or integrate specialized plugins.

Architectural Overview of Bootstrap Dropdowns

Bootstrap’s core does not include a built-in multiselect dropdown component. The library provides the basic dropdown toggle and menu logic in js/src/dropdown.js and the corresponding styles in scss/_dropdown.scss. To support multiple-select behavior, you typically combine:

1. Bootstrap’s dropdown markup and JavaScript – responsible for opening and closing the menu, positioning via Popper, and handling keyboard navigation.
2. A custom script or third-party plugin that tracks selected items, toggles the active class on <a class="dropdown-item"> elements, and updates a hidden <select multiple> or visual badge list.
3. Optional ARIA attributes – for accessibility, each <a> should have role="option" and the container role="listbox"; selected items receive aria-selected="true".

The flow works by synchronizing the visual state of the dropdown items with the selected options of a hidden native select element, ensuring form compatibility while providing a styled interface.

Method 1: Pure Bootstrap 4 Multiple Select Implementation

The Hidden Select Pattern

This approach uses a hidden <select multiple> element to store the actual form values while the visible Bootstrap dropdown provides the user interface. When a user clicks a dropdown item, JavaScript toggles the active class on that item and updates the corresponding <option> element's selected property.

Complete Working Example

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<select multiple class="d-none" id="fruitsSelect">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
  <option value="date">Date</option>
</select>

<div class="dropdown">
  <button class="btn btn-outline-primary dropdown-toggle" type="button" id="fruitsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Select fruits
  </button>
  <div class="dropdown-menu" aria-labelledby="fruitsDropdown">
    <a class="dropdown-item" href="#" data-value="apple">Apple</a>
    <a class="dropdown-item" href="#" data-value="banana">Banana</a>
    <a class="dropdown-item" href="#" data-value="cherry">Cherry</a>
    <a class="dropdown-item" href="#" data-value="date">Date</a>
  </div>
</div>

<div id="selectedBadges" class="mt-2"></div>

<script>
  $('.dropdown-item').on('click', function (e) {
    e.preventDefault();
    const $item = $(this);
    const value = $item.data('value');
    const $select = $('#fruitsSelect');
    const $option = $select.find(`option[value="${value}"]`);

    $item.toggleClass('active');
    
    if ($item.hasClass('active')) {
      $option.prop('selected', true);
    } else {
      $option.prop('selected', false);
    }

    const selected = $select.val() || [];
    const badgeHtml = selected
      .map(v => `<span class="badge badge-primary mr-1">${v}</span>`)
      .join('');
    $('#selectedBadges').html(badgeHtml);
  });
</script>

Key implementation details:

• The dropdown uses standard Bootstrap 4 data attributes (data-toggle="dropdown") handled by js/src/dropdown.js.
• The active class visually indicates selected items using styles defined in scss/_dropdown.scss.
• The hidden <select multiple> maintains form compatibility for server-side processing.

Method 2: Using the bootstrap-select Plugin

For production environments, the bootstrap-select plugin provides a complete multiselect solution that extends Bootstrap's dropdown engine. It automatically handles selection tracking, badge rendering, and keyboard navigation while maintaining full compatibility with Bootstrap 4's styling system.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

<select class="selectpicker" multiple data-live-search="true" data-width="100%" title="Choose fruits">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
  <option value="date">Date</option>
</select>

<script>
  $(document).ready(function () {
    $('.selectpicker').selectpicker();
  });
</script>

Advantages of this approach:

• Zero custom JavaScript required for basic functionality.
• Live search capability via data-live-search="true".
• Responsive width control using data-width="100%".
• Automatic ARIA attributes and keyboard navigation handling.

Key Source Files in the Bootstrap Repository

Understanding the underlying architecture helps when customizing multiselect behavior. The Bootstrap 4 dropdown system relies on these core files:

• js/src/dropdown.js – Contains the Dropdown class that manages toggle visibility, keyboard events (Escape, Arrow keys), and Popper.js integration for positioning.
• scss/_dropdown.scss – Defines styles for .dropdown-menu, .dropdown-toggle, .dropdown-item, and state classes like .active and .show.
• js/dist/dropdown.js – The compiled distribution version used when loading Bootstrap via CDN.
• scss/_forms.scss – Contains styles for form controls including .form-select, relevant when displaying the native multiselect element.
• js/src/util.js – Utility functions like getSelectorFromElement and isElement that support the dropdown component.

These files demonstrate that Bootstrap's dropdown architecture is intentionally modular, providing the visibility and positioning logic while leaving selection state management to specialized implementations or third-party plugins.

Summary

• Bootstrap 4 core lacks a native multiselect dropdown; the dropdown.js component only handles menu visibility and keyboard navigation.
• Two primary implementation paths exist: a lightweight custom JavaScript solution that toggles the active class on .dropdown-item elements and syncs with a hidden <select multiple>, or the production-ready bootstrap-select plugin.
• Custom implementations should mirror selection state to a hidden form element for server-side compatibility and utilize Bootstrap's scss/_dropdown.scss styles for visual consistency.
• bootstrap-select extends Bootstrap's dropdown engine with search, badges, and ARIA support without requiring custom selection logic.
• Core source files for reference include js/src/dropdown.js for toggle logic and scss/_dropdown.scss for styling states.

Frequently Asked Questions

Does Bootstrap 4 include a built-in multiselect dropdown component?

No, Bootstrap 4 does not include a built-in multiselect dropdown. The framework provides the dropdown.js component (located in js/src/dropdown.js) which handles single-selection menu toggling, positioning via Popper.js, and keyboard navigation, but it lacks logic for tracking multiple selected items. To achieve multiselect functionality, you must implement custom JavaScript or use a third-party plugin like bootstrap-select that extends Bootstrap's dropdown foundation.

How do I retrieve selected values from a Bootstrap 4 multiselect dropdown?

The method depends on your implementation. If using the custom pure-Bootstrap approach, read the values from the hidden <select multiple> element using standard JavaScript (document.getElementById('mySelect').value or jQuery's .val()), which returns an array of selected option values. If using the bootstrap-select plugin, call the .selectpicker('val') method on the initialized element, or simply query the underlying <select> element as the plugin keeps it synchronized automatically.

Can I create a Bootstrap 4 multiselect dropdown without jQuery?

Yes, but with limitations. The custom implementation can be written in vanilla JavaScript by attaching click event listeners to .dropdown-item elements, manually toggling the active class, and updating a hidden <select multiple> element's selected properties. However, Bootstrap 4's JavaScript components (including dropdown.js) depend on jQuery, so you would need to either use Bootstrap's CSS-only dropdowns with custom JS logic, or use a vanilla-JS alternative like bootstrap-select v1.14+ which can work without jQuery in some configurations, though traditionally it requires it.

What is the difference between a Bootstrap dropdown and a Bootstrap select?

A Bootstrap dropdown (implemented in js/src/dropdown.js) is a generic toggle component that displays or hides a menu of links or buttons; it has no built-in form value or selection state management. A Bootstrap select (styled via scss/_forms.scss) is a form control that uses the native HTML <select> element, supporting the multiple attribute for native multiselect behavior, but lacking the styled dropdown UI. To combine both worlds—a styled dropdown UI with multiselect form functionality—you must bridge these two systems using custom JavaScript or the bootstrap-select plugin.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}