Bootstrap 4 Components

Input Groups

Input groups allow you to combine text and form controls on a single line.

To do this you need class .input-group to the create the input group and .input-group-addon for the element you want to combine with that input.

Input group with a single addon

<div class="input-group">
    <span class="input-group-addon" id="basic-addon1">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

Input group with addons on both sides

$ .00

<div class="input-group">
    <span class="input-group-addon" id="basic-addon1">$</span>
    <input type="text" class="form-control" aria-describedby="basic-addon1">
    <span class="input-group-addon" id="basic-addon1">.00</span>
</div>

Input group with more than one addons or either side

$ .00

<div class="input-group">
    <span class="input-group-addon" id="basic-addon1">$</span>
    <span class="input-group-addon" id="basic-addon1">.00</span>
    <input type="text" class="form-control" aria-describedby="basic-addon1">
</div>

Size

Use classes .input-group-lg or .input-group-sm to the to the input group and the contents of the input group will automatically resize themselves according to the size of the input group.

<div class="input-group input-group-lg">
    <span class="input-group-addon" id="basic-addon1">$</span>
    <input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
<!--Small input group-->
<div class="input-group input-group-sm">
    <span class="input-group-addon" id="basic-addon1">$</span>
    <input type="text" class="form-control" aria-describedby="basic-addon1">
</div>

Radio inputs and Checkboxes as addon

Instead of text, use radio button or a checkbox to an inputs addon.

<!--Checkbox addon-->
<div class="input-group">
    <span class="input-group-addon">
        <input type="checkbox" aria-label="Checkbox as an addon">
    </span>
    <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
<!--Radio button addon-->
<div class="input-group">
    <span class="input-group-addon">
        <input type="radio" aria-label="Radio button as an addon">
    </span>
    <input type="text" class="form-control" aria-label="Text input with radio button">
</div>

Buttons as Addon

When using buttons as addons in an input group the buttons must be wrapped inside the class .input-group-btn. Like text Addons you can add multiple button addons on either side of the input.

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search for...">
    <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">Go!</button>
    </span>
</div>

Dropdown as Addons

Add a dropdown into the addon button by including a dropdown menu in the button.

<div class="input-group">
    <input type="text" class="form-control" aria-label="Text input with dropdown button">
    <div class="input-group-btn">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Action
        </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>
    </div>
</div>

Win a chance to get our Mega-pack for FREE!