How can I create a multi-select dropdown using only Bootstrap pieces?

Asked on Sep 02, 2025

1 Answer

To create a multi-select dropdown using Bootstrap, you can utilize the Bootstrap dropdown component combined with checkboxes. This allows users to select multiple options from the dropdown.

<!-- BEGIN COPY / PASTE -->
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                Select Options
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <li>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="option1">
                        <label class="form-check-label" for="option1">
                            Option 1
                        </label>
                    </div>
                </li>
                <li>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="option2">
                        <label class="form-check-label" for="option2">
                            Option 2
                        </label>
                    </div>
                </li>
                <li>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="option3">
                        <label class="form-check-label" for="option3">
                            Option 3
                        </label>
                    </div>
                </li>
            </ul>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

This example uses a Bootstrap dropdown with checkboxes inside it.
The `dropdown-toggle` class and `data-bs-toggle="dropdown"` attribute are used to make the button toggle the dropdown.
Each option is wrapped in a `form-check` div to style the checkboxes according to Bootstrap's standards.
You can add more options by duplicating the `
` elements and adjusting the `id` and `label` accordingly.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions