Range and Input Groups

Range and Input Groups

Range slider

Use .form-range on an <input type="range"> to create a styled slider:

<label for="customRange" class="form-label">Range</label>
<input type="range" class="form-range" id="customRange">

Input group

Input groups extend form controls by adding text, buttons, or icons around an input. Use .input-group with .input-group-text.

Basic input group

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

Text on the right

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Amount">
  <span class="input-group-text">.00</span>
</div>

Buttons in input groups

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

Input group sizing

• .input-group-lg large input group.
• .input-group-sm small input group.

TL;DR

• .form-range styles range sliders.
• .input-group wraps an input with text or buttons.
• .input-group-text styles the added text.
• .input-group-lg and .input-group-sm size the group.