Input group
Text
Before
#
After
@example.com
Before and after
$
.00
<h4 class="h5 text-muted mt-3">Before</h4>
<div>
<span id="before">#</span>
<input type="text" placeholder="Hashtag">
</div>
<h4 class="h5 text-muted mt-3">After</h4>
<div>
<input type="text" placeholder="Username">
<span id="after">@example.com</span>
</div>
<h4 class="h5 text-muted mt-3">Before and after</h4>
<div>
<span>$</span>
<input type="text">
<span>.00</span>
</div><h4 class="h5 text-muted mt-3">Before</h4>
<div>
<span id="before">#</span>
<input type="text" placeholder="Hashtag">
</div>
<h4 class="h5 text-muted mt-3">After</h4>
<div>
<input type="text" placeholder="Username">
<span id="after">@example.com</span>
</div>
<h4 class="h5 text-muted mt-3">Before and after</h4>
<div>
<span>$</span>
<input type="text">
<span>.00</span>
</div>
Other form controls
Textarea
Message
Select
Select option
File
<h4 class="h5 text-muted mt-3">Textarea</h4>
<div>
<span id="textarea">Message</span>
<textarea placeholder="Write your message here"></textarea>
</div>
<h4 class="h5 text-muted mt-3">Select</h4>
<div>
<span id="select">Select option</span>
<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>
<label>Upload</label>
<input id="file">
</div><h4 class="h5 text-muted mt-3">Textarea</h4>
<div>
<span id="textarea">Message</span>
<textarea placeholder="Write your message here"></textarea>
</div>
<h4 class="h5 text-muted mt-3">Select</h4>
<div>
<span id="select">Select option</span>
<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>
<label>Upload</label>
<input id="file">
</div>
Label
#
<label>Input group label</label>
<div>
<span id="labelText">#</span>
<input type="text" id="label" placeholder="Hashtag">
</div><label>Input group label</label>
<div>
<span id="labelText">#</span>
<input type="text" id="label" placeholder="Hashtag">
</div>
Sizing
Small
#
Default
#
Large
#
<h4 class="h5 text-muted mt-3">Small</h4>
<div>
<span id="small">#</span>
<input type="text" placeholder="Hashtag">
</div>
<h4 class="h5 text-muted mt-3">Default</h4>
<div>
<span id="default">#</span>
<input type="text" placeholder="Hashtag">
</div>
<h4 class="h5 text-muted mt-3">Large</h4>
<div>
<span id="large">#</span>
<input type="text" placeholder="Hashtag">
</div><h4 class="h5 text-muted mt-3">Small</h4>
<div>
<span id="small">#</span>
<input type="text" placeholder="Hashtag">
</div>
<h4 class="h5 text-muted mt-3">Default</h4>
<div>
<span id="default">#</span>
<input type="text" placeholder="Hashtag">
</div>
<h4 class="h5 text-muted mt-3">Large</h4>
<div>
<span id="large">#</span>
<input type="text" placeholder="Hashtag">
</div>
Checks
Check
Radio
<h4 class="h5 text-muted mt-3">Check</h4>
<div>
<span>
<input type="checkbox">
</span>
<input type="text" placeholder="Text input with checkbox">
</div>
<h4 class="h5 text-muted mt-3">Radio</h4>
<div>
<span>
<input type="radio">
</span>
<input type="text" placeholder="Text input with radio button">
</div><h4 class="h5 text-muted mt-3">Check</h4>
<div>
<span>
<input type="checkbox">
</span>
<input type="text" placeholder="Text input with checkbox">
</div>
<h4 class="h5 text-muted mt-3">Radio</h4>
<div>
<span>
<input type="radio">
</span>
<input type="text" placeholder="Text input with radio button">
</div>
Multiple inputs
First and last name
<div>
<span>First and last name</span>
<input type="text">
<input type="text">
</div><div>
<span>First and last name</span>
<input type="text">
<input type="text">
</div>
Multiple text
Before
1
2
3
After
1
2
3
<h4 class="h5 text-muted mt-3">Before</h4>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<input type="text">
</div>
<h4 class="h5 text-muted mt-3">After</h4>
<div>
<input type="text">
<span>1</span>
<span>2</span>
<span>3</span>
</div><h4 class="h5 text-muted mt-3">Before</h4>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<input type="text">
</div>
<h4 class="h5 text-muted mt-3">After</h4>
<div>
<input type="text">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
Button
Before
After
<h4 class="h5 text-muted mt-3">Before</h4>
<div>
<button type="button">Search</button>
<input type="text" placeholder="Search text here">
</div>
<h4 class="h5 text-muted mt-3">After</h4>
<div>
<input type="text" placeholder="Search text here">
<button type="button">Search</button>
</div><h4 class="h5 text-muted mt-3">Before</h4>
<div>
<button type="button">Search</button>
<input type="text" placeholder="Search text here">
</div>
<h4 class="h5 text-muted mt-3">After</h4>
<div>
<input type="text" placeholder="Search text here">
<button type="button">Search</button>
</div>
Dropdown
<div>
<button type="button" id="dropdown">Topic</button>
<div>
<a href="#">First item</a>
<a href="#">Second item</a>
<a href="#">Third item</a>
</div>
<input type="text" placeholder="Search text here">
</div><div>
<button type="button" id="dropdown">Topic</button>
<div>
<a href="#">First item</a>
<a href="#">Second item</a>
<a href="#">Third item</a>
</div>
<input type="text" placeholder="Search text here">
</div>
Dropdown split button
<div>
<button type="button">Topic</button>
<button type="button" id="dropdownSplit"><span>Toggle dropdown</span></button>
<div>
<a href="#">First item</a>
<a href="#">Second item</a>
<a href="#">Third item</a>
</div>
<input type="text" placeholder="Search text here">
</div><div>
<button type="button">Topic</button>
<button type="button" id="dropdownSplit"><span>Toggle dropdown</span></button>
<div>
<a href="#">First item</a>
<a href="#">Second item</a>
<a href="#">Third item</a>
</div>
<input type="text" placeholder="Search text here">
</div>