Input group
Text
Before
#
After
@example.com
Before and after
$
.00
<h4 class="h5 text-muted mt-3">Before</h4>
<div class="input-group">
<span class="input-group-text" id="before">#</span>
<input type="text" class="form-control" placeholder="Hashtag" aria-label="Hashtag" aria-describedby="before">
</div>
<h4 class="h5 text-muted mt-3">After</h4>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="after">
<span class="input-group-text" id="after">@example.com</span>
</div>
<h4 class="h5 text-muted mt-3">Before and after</h4>
<div class="input-group">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to nearest dollar)">
<span class="input-group-text">.00</span>
</div><h4 class="h5 text-muted mt-3">Before</h4>
<div class="input-group">
<span class="input-group-text" id="before">#</span>
<input type="text" class="form-control" placeholder="Hashtag" aria-label="Hashtag" aria-describedby="before">
</div>
<h4 class="h5 text-muted mt-3">After</h4>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="after">
<span class="input-group-text" id="after">@example.com</span>
</div>
<h4 class="h5 text-muted mt-3">Before and after</h4>
<div class="input-group">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to nearest dollar)">
<span class="input-group-text">.00</span>
</div>
Other form controls
Textarea
Message
Select
Select option
File
<h4 class="h5 text-muted mt-3">Textarea</h4>
<div class="input-group">
<span class="input-group-text" id="textarea">Message</span>
<textarea class="form-control" placeholder="Write your message here" aria-label="Message" aria-describedby="textarea"></textarea>
</div>
<h4 class="h5 text-muted mt-3">Select</h4>
<div class="input-group">
<span class="input-group-text" id="select">Select option</span>
<select class="form-select" aria-label="Default select" aria-describedby="select">
<option value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
<option value="4">Option four</option>
<option value="5">Option five</option>
</select>
</div>
<h4 class="h5 text-muted mt-3">File</h4>
<div class="input-group">
<label class="input-group-text" for="file">Upload</label>
<input type="file" class="form-control" id="file">
</div><h4 class="h5 text-muted mt-3">Textarea</h4>
<div class="input-group">
<span class="input-group-text" id="textarea">Message</span>
<textarea class="form-control" placeholder="Write your message here" aria-label="Message" aria-describedby="textarea"></textarea>
</div>
<h4 class="h5 text-muted mt-3">Select</h4>
<div class="input-group">
<span class="input-group-text" id="select">Select option</span>
<select class="form-select" aria-label="Default select" aria-describedby="select">
<option value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
<option value="4">Option four</option>
<option value="5">Option five</option>
</select>
</div>
<h4 class="h5 text-muted mt-3">File</h4>
<div class="input-group">
<label class="input-group-text" for="file">Upload</label>
<input type="file" class="form-control" id="file">
</div>
Label
#
<label for="label" class="form-label">Input group label</label>
<div class="input-group">
<span class="input-group-text" id="labelText">#</span>
<input type="text" id="label" class="form-control" placeholder="Hashtag" aria-label="Hashtag" aria-describedby="labelText">
</div><label for="label" class="form-label">Input group label</label>
<div class="input-group">
<span class="input-group-text" id="labelText">#</span>
<input type="text" id="label" class="form-control" placeholder="Hashtag" aria-label="Hashtag" aria-describedby="labelText">
</div>
Sizing
Small
#
Default
#
Large
#
<h4 class="h5 text-muted mt-3">Small</h4>
<div class="input-group input-group-sm">
<span class="input-group-text" id="small">#</span>
<input type="text" class="form-control" placeholder="Hashtag" aria-label="Hashtag" aria-describedby="small">
</div>
<h4 class="h5 text-muted mt-3">Default</h4>
<div class="input-group">
<span class="input-group-text" id="default">#</span>
<input type="text" class="form-control" placeholder="Hashtag" aria-label="Hashtag" aria-describedby="default">
</div>
<h4 class="h5 text-muted mt-3">Large</h4>
<div class="input-group input-group-lg">
<span class="input-group-text" id="large">#</span>
<input type="text" class="form-control" placeholder="Hashtag" aria-label="Hashtag" aria-describedby="large">
</div><h4 class="h5 text-muted mt-3">Small</h4>
<div class="input-group input-group-sm">
<span class="input-group-text" id="small">#</span>
<input type="text" class="form-control" placeholder="Hashtag" aria-label="Hashtag" aria-describedby="small">
</div>
<h4 class="h5 text-muted mt-3">Default</h4>
<div class="input-group">
<span class="input-group-text" id="default">#</span>
<input type="text" class="form-control" placeholder="Hashtag" aria-label="Hashtag" aria-describedby="default">
</div>
<h4 class="h5 text-muted mt-3">Large</h4>
<div class="input-group input-group-lg">
<span class="input-group-text" id="large">#</span>
<input type="text" class="form-control" placeholder="Hashtag" aria-label="Hashtag" aria-describedby="large">
</div>
Checks
Check
Radio
<h4 class="h5 text-muted mt-3">Check</h4>
<div class="input-group">
<span class="input-group-text">
<input type="checkbox" class="form-check-input" aria-label="Checkbox for text input">
</span>
<input type="text" class="form-control" placeholder="Text input with checkbox" aria-label="Text input with checkbox">
</div>
<h4 class="h5 text-muted mt-3">Radio</h4>
<div class="input-group">
<span class="input-group-text">
<input type="radio" class="form-check-input" aria-label="Radio button for text input">
</span>
<input type="text" class="form-control" placeholder="Text input with radio button" aria-label="Text input with radio button">
</div><h4 class="h5 text-muted mt-3">Check</h4>
<div class="input-group">
<span class="input-group-text">
<input type="checkbox" class="form-check-input" aria-label="Checkbox for text input">
</span>
<input type="text" class="form-control" placeholder="Text input with checkbox" aria-label="Text input with checkbox">
</div>
<h4 class="h5 text-muted mt-3">Radio</h4>
<div class="input-group">
<span class="input-group-text">
<input type="radio" class="form-check-input" aria-label="Radio button for text input">
</span>
<input type="text" class="form-control" placeholder="Text input with radio button" aria-label="Text input with radio button">
</div>
Multiple inputs
First and last name
<div class="input-group">
<span class="input-group-text">First and last name</span>
<input type="text" class="form-control" aria-label="First name">
<input type="text" class="form-control" aria-label="Last name">
</div><div class="input-group">
<span class="input-group-text">First and last name</span>
<input type="text" class="form-control" aria-label="First name">
<input type="text" class="form-control" aria-label="Last name">
</div>
Multiple text
Before
1
2
3
After
1
2
3
<h4 class="h5 text-muted mt-3">Before</h4>
<div class="input-group">
<span class="input-group-text">1</span>
<span class="input-group-text">2</span>
<span class="input-group-text">3</span>
<input type="text" class="form-control" aria-label="Multiple text">
</div>
<h4 class="h5 text-muted mt-3">After</h4>
<div class="input-group">
<input type="text" class="form-control" aria-label="Multiple text">
<span class="input-group-text">1</span>
<span class="input-group-text">2</span>
<span class="input-group-text">3</span>
</div><h4 class="h5 text-muted mt-3">Before</h4>
<div class="input-group">
<span class="input-group-text">1</span>
<span class="input-group-text">2</span>
<span class="input-group-text">3</span>
<input type="text" class="form-control" aria-label="Multiple text">
</div>
<h4 class="h5 text-muted mt-3">After</h4>
<div class="input-group">
<input type="text" class="form-control" aria-label="Multiple text">
<span class="input-group-text">1</span>
<span class="input-group-text">2</span>
<span class="input-group-text">3</span>
</div>
Button
Before
After
<h4 class="h5 text-muted mt-3">Before</h4>
<div class="input-group">
<button type="button" class="btn btn-secondary" id="buttonBefore">Search</button>
<input type="text" class="form-control" placeholder="Search text here" aria-label="Text input with button" aria-describedby="buttonBefore">
</div>
<h4 class="h5 text-muted mt-3">After</h4>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search text here" aria-label="Text input with button" aria-describedby="buttonAfter">
<button type="button" class="btn btn-secondary" id="buttonAfter">Search</button>
</div><h4 class="h5 text-muted mt-3">Before</h4>
<div class="input-group">
<button type="button" class="btn btn-secondary" id="buttonBefore">Search</button>
<input type="text" class="form-control" placeholder="Search text here" aria-label="Text input with button" aria-describedby="buttonBefore">
</div>
<h4 class="h5 text-muted mt-3">After</h4>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search text here" aria-label="Text input with button" aria-describedby="buttonAfter">
<button type="button" class="btn btn-secondary" id="buttonAfter">Search</button>
</div>
Dropdown
<div class="input-group">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Topic</button>
<div class="dropdown-menu" aria-labelledby="dropdown">
<a href="#" class="dropdown-item">First item</a>
<a href="#" class="dropdown-item">Second item</a>
<a href="#" class="dropdown-item">Third item</a>
</div>
<input type="text" class="form-control" placeholder="Search text here" aria-label="Text input with dropdown">
</div><div class="input-group">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Topic</button>
<div class="dropdown-menu" aria-labelledby="dropdown">
<a href="#" class="dropdown-item">First item</a>
<a href="#" class="dropdown-item">Second item</a>
<a href="#" class="dropdown-item">Third item</a>
</div>
<input type="text" class="form-control" placeholder="Search text here" aria-label="Text input with dropdown">
</div>
Dropdown split button
<div class="input-group">
<button type="button" class="btn btn-secondary">Topic</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownSplit" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="visually-hidden">Toggle dropdown</span></button>
<div class="dropdown-menu" aria-labelledby="dropdownSplit">
<a href="#" class="dropdown-item">First item</a>
<a href="#" class="dropdown-item">Second item</a>
<a href="#" class="dropdown-item">Third item</a>
</div>
<input type="text" class="form-control" placeholder="Search text here" aria-label="Text input with dropdown">
</div><div class="input-group">
<button type="button" class="btn btn-secondary">Topic</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownSplit" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="visually-hidden">Toggle dropdown</span></button>
<div class="dropdown-menu" aria-labelledby="dropdownSplit">
<a href="#" class="dropdown-item">First item</a>
<a href="#" class="dropdown-item">Second item</a>
<a href="#" class="dropdown-item">Third item</a>
</div>
<input type="text" class="form-control" placeholder="Search text here" aria-label="Text input with dropdown">
</div>