Bootstrap Input Groups

Overview

Input groups allow you to add text, buttons, or button groups on either side of textual inputs.

Basic Input Groups

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

<!-- Append -->
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Recipient's username">
    <span class="input-group-text">@example.com</span>
</div>

<!-- Both sides -->
<div class="input-group mb-3">
    <span class="input-group-text">$</span>
    <input type="text" class="form-control">
    <span class="input-group-text">.00</span>
</div>

With Buttons

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

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

Sizing

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

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

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

Next Steps

Next: Bootstrap Floating Labels →