Bootstrap5 Input Groups

We can use the .input-group class to add more styles to form input fields, such as icons, text, or buttons.

The .input-group-text class is used to style the text.

Bootstrap Example

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

  <div class="input-group">
    <input type="text" class="form-control" placeholder="Your Email">
    <span class="input-group-text">@tutorialpro.org</span>
  </div>
</form>

Input Sizing

Use the .input-group-sm class for small input fields and .input-group-lg for large input fields:

Bootstrap Example

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">Small</span>
  <input type="text" class="form-control">
</div>

<div class="input-group mb-3">
  <span class="input-group-text">Default</span>
  <input type="text" class="form-control">
</div>

<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">Large</span>
  <input type="text" class="form-control">
</div>

Multiple Inputs and Text

Bootstrap Example

<!-- Multiple Inputs -->
<div class="input-group mb-3">
  <span class="input-group-text">Person</span>
  <input type="text" class="form-control" placeholder="First Name">
  <input type="text" class="form-control" placeholder="Last Name">
</div>

<!-- Multiple Text Information -->
<div class="input-group mb-3">
  <span class="input-group-text">One</span>
  <span class="input-group-text">Two</span>
  <span class="input-group-text">Three</span>
  <input type="text" class="form-control">
</div>

Checkboxes and Radio Buttons

Text information can be replaced with checkboxes and radio buttons:

Bootstrap Example

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="tutorialpro">
</div>

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="GOOGLE">
</div>

Adding Button Groups to Input Fields

Bootstrap Example

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">Basic Button</button>

<div>
  <input type="text" class="form-control" placeholder="Some text">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search">
  <button class="btn btn-success" type="submit">Go</button>
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Something clever..">
  <button class="btn btn-primary" type="button">OK</button>
  <button class="btn btn-danger" type="button">Cancel</button>
</div>

Setting a Dropdown Menu

Adding a dropdown menu to an input field does not require the use of the .dropdown class.

Bootstrap Example

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Select Website
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="https://www.google.com">GOOGLE</a></li>
    <li><a class="dropdown-item" href="https://www.tutorialpro.org">tutorialpro</a></li>
    <li><a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Website address">
</div>

Input Group Labels

To set labels for input groups, place the label outside the input group. The label's for attribute should correspond to the input group's id. Clicking the label will focus the input field:

Bootstrap Example

<form>
    <label for="demo">Enter your email here:</label>
    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
         <span class="input-group-text">@tutorialpro.org</span>
    </div>
</form>