How do I create an input group with a dropdown button and a text field?

Asked on Jul 18, 2025

1 Answer

To create an input group with a dropdown button and a text field using Bootstrap 5, you can utilize the input group component combined with a dropdown. Here's a concise example:

<!-- BEGIN COPY / PASTE -->
        <div class="input-group">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
            <input type="text" class="form-control" placeholder="Enter text">
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `input-group` class is used to wrap the dropdown button and the text input together.
The `btn btn-outline-secondary dropdown-toggle` classes are applied to the button to style it and enable the dropdown functionality.
The `dropdown-menu` class is used to define the dropdown items.
Ensure you have Bootstrap's JavaScript included in your project for the dropdown to function.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions