Bootstrap Input Groups

Bootstrap Input Groups allow you to effortlessly stitch custom text fragments, informative icons, and interactive buttons directly onto either side (or both sides!) of standard .form-control textual inputs. This creates highly descriptive grouped UI elements natively!

Basic Text Addons

Wrap everything inside a master <div class="input-group"> element. Next, establish a standard Bootstrap .form-control input inside of it. Finally, firmly inject an inline <span class="input-group-text"> element directly before (to prepend) or decisively after (to append) your input!

<!-- Prepend Icon -->
<div class="input-group mb-3">
    <span class="input-group-text" id="addon-at">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="addon-at">
</div>

<!-- Append Domain -->
<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>

<!-- Prepend AND Append -->
<div class="input-group">
    <span class="input-group-text">$</span>
    <input type="text" class="form-control">
    <span class="input-group-text">.00</span>
</div>

Sizing Wrappers

One of the strongest benefits of utilizing the master .input-group wrapper is scalability. Instead of attempting to scale every internal text fragment and input element individually, you can natively scale the entire unified package solely by applying .input-group-lg or .input-group-sm exclusively onto the surrounding wrapper element!

<!-- Uniformly enlarge everything using input-group-lg -->
<div class="input-group input-group-lg mb-3">
    <span class="input-group-text">Large Addon</span>
    <input type="text" class="form-control">
</div>

<!-- Uniformly shrink everything using input-group-sm -->
<div class="input-group input-group-sm">
    <span class="input-group-text">Small Addon</span>
    <input type="text" class="form-control">
</div>

Button Addons

By heavily integrating standard Bootstrap button components, you can bypass static text completely and forcibly construct sophisticated search bars or actionable dropdown combos. To successfully assemble a button addon, place a raw <button class="btn btn-..."> directly inside the .input-group. You do not need to wrap the button natively inside any `.input-group-text` spans!

<!-- Prepended Button (Search Bar style) -->
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Enter keyword...">
    <button class="btn btn-primary" type="button" id="searchBtn">Search Database</button>
</div>