Learn with us

In Bootstrap 5, input groups allow you to combine an input field with additional elements such as buttons, dropdowns, or text, creating a unified and functional component. Here’s how you can create input groups in Bootstrap 5:

1. Basic Input Group:

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

In this example, the input-group class is applied to the <div> container to create the input group. The input-group-text class is added to the <span> element to style it as a prepended or appended element, in this case, an “@” symbol. The input field is created using the <input> element with the form-control class.

2. Input Group with Button:

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username">
  <button class="btn btn-primary" type="button">Send</button>
</div>

Here, the input field is followed by a button element to create an input group with a button. The button is styled using the btn and btn-primary classes.

3. Input Group with Dropdown:

<div class="input-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Actions</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action 1</a>
    <a class="dropdown-item" href="#">Action 2</a>
    <a class="dropdown-item" href="#">Action 3</a>
  </div>
  <input type="text" class="form-control" placeholder="Type something...">
</div>

In this example, the input field is preceded by a button element with the dropdown-toggle class. The button is configured to toggle a dropdown menu using the data-bs-toggle attribute. The dropdown menu is created within a <div> container with the dropdown-menu class.

4. Input Group with Multiple Elements:

<div class="input-group">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" placeholder="Amount">
  <span class="input-group-text">.00</span>
  <button class="btn btn-primary" type="button">Submit</button>
</div>

In this example, the input group contains multiple elements. It starts with a prepended “$” symbol, followed by the input field for the amount, and ends with a “.00” appended element. Additionally, a submit button is included in the input group.

These examples demonstrate various configurations of input groups in Bootstrap 5. You can further customize the appearance and functionality of input groups using additional Bootstrap classes and components.

Make sure to include the necessary Bootstrap 5 CSS and JavaScript files in your project to apply the input group styling and functionality provided by Bootstrap.