Bootstrap 4 Input Groups

The .input-group container in Bootstrap allows you to add text, icons, buttons, or dropdowns to your input fields, making your forms more powerful.

Use .input-group-prepend to add text in front, and .input-group-append to add it behind the input. Use .input-group-text to style the text.

Input Group Basic Example

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

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Your Email">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
</div>

Input Group Sizing

Use .input-group-sm and .input-group-lg for small and large inputs.

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

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

Multiple Inputs and Helpers

<div class="input-group">
  <input type="text" class="form-control" placeholder="First Name">
  <input type="text" class="form-control" placeholder="Last Name">
</div>

Input Group with Checkboxes and Radios

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

Input Group Buttons

<div class="input-group mb-3">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Go</button>
  </div>
</div>

Input Group with Dropdown Button

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
      Action
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Option 1</a>
      <a class="dropdown-item" href="#">Option 2</a>
    </div>
  </div>
  <input type="text" class="form-control">
</div>

Input Group Labels

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">First and Last</span>
  </div>
  <input type="text" class="form-control">
</div>

Conclusion

With Bootstrap 4 Navs and Input Groups, you can create well-structured and user-friendly navigation and form layouts. These components help make your web pages more dynamic, engaging, and easy to navigate.

In our next blog, we’ll explore Custom Forms, the Toast Plugin, and Bootstrap Utilities — essential tools for modern responsive web design. Continue your Bootstrap learning journey with Credo Systemz!

Key Takeaways:

Use .nav-tabs or .nav-pills to control nav styles.
Add .dropdown, .nav-fill, and .nav-justified for advanced navigation.
Use .input-group, .input-group-prepend, and .input-group-text to style form inputs.

Request more information

Bootstrap 4 Input Groups