Bootstrap Form Inputs Textbox Checkbox
Bootstrap version 5 Form Inputs, radio button checkbox, input text, textarea example codes
Bootstrap version 5 Input Floating labels
1
Textbox Sizing
2
Textbox with vertical label
3
Textbox with Horizontal label
4
Textbox with help text
5
input-group prefix
Bootstrap input prefix text or button left right center code example
@
@example.com
$
.00
@
With textarea
First and last name
6
Textbox grid
Bootstrap input grid code example
7
Textbox group
8
Input Group Prefix Button
Bootstrap input group prefix button code example
9
checkbox
Bootstrap checkbox horizontal code example
<div class="form-check">
<input class="form-check-input" type="checkbox" id="ckb9a">
<label class="form-check-label" for="ckb9a">Default checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="ckb9b" checked>
<label class="form-check-label" for="ckb9b">Checked checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="ckb9c" disabled>
<label class="form-check-label" for="ckb9c">Disabled checkbox</label>
</div>
10
checkbox inline
Bootstrap checkbox inline code example
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="ickb10a">
<label class="form-check-label" for="ickb10a">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="ickb10b" disabled>
<label class="form-check-label" for="ickb10b">2</label>
</div>
11
Bootstrap checkbox radio without labels
12
Bootstrap select example code
Default size select
Large size select
13
input file
Default size input type file example
Large size input type file example
14
Bootstrap textarea code
15
Bootstrap floating form labels
Input type text floating label
Textarea floating label
Select floating label
16
Bootstrap checkbox radio switch
Checkbox switches example
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="id16-a">
<label class="form-check-label" for="id16-a">Default switch</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="id16-b" checked>
<label class="form-check-label" for="id16-b">Checked switch</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="id16-c" disabled>
<label class="form-check-label" for="id16-c">Disabled switch</label>
</div>
17