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

Bootstrap input text size small large

HTML
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" >
2

Textbox with vertical label

Bootstrap input form vertical code example

HTML
<div class="mb-3">
    <label for="input2" class="form-label">Name</label>
    <input type="text" class="form-control" id="input2" placeholder="name">
</div>
3

Textbox with Horizontal label

Bootstrap input form horizontal code example

HTML
<div class="mb-3 row">
    <label for="textbox3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="textbox3">
    </div>
</div>
4

Textbox with help text

Bootstrap input help text code example

username a-z only
HTML
<div class="mb-3">
    <label for="input4" class="form-label">username</label>
    <input type="text" class="form-control" id="input4" placeholder="name">
    <small class="form-text text-muted">username a-z only</small>
</div>
5

input-group prefix

Bootstrap input prefix text or button left right center code example

@
HTML
<div class="input-group mb-3">
    <span class="input-group-text" id="basic-addon1">@</span>
    <input type="text" class="form-control" placeholder="Username">
</div>
@example.com
HTML
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="username">
    <span class="input-group-text" id="basic-addon3">@example.com</span>
</div>
$ .00
HTML
<div class="input-group mb-3">
    <span class="input-group-text">$</span>
    <input type="text" class="form-control">
    <span class="input-group-text">.00</span>
</div>
@
HTML
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Username">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Server">
</div>
With textarea
HTML
<div class="input-group">
    <span class="input-group-text">With textarea</span>
    <textarea class="form-control"></textarea>
</div>
First and last name
HTML
<div class="input-group">
    <span class="input-group-text">First and last name</span>
    <input type="text" aria-label="First name" class="form-control">
    <input type="text" aria-label="Last name" class="form-control">
</div>
$ 0.00
HTML
<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
  <input type="text" class="form-control">
</div>
6

Textbox grid

Bootstrap input grid code example

HTML
<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name">
  </div>
</div>
7

Textbox group

Bootstrap input group inline code example

HTML
<div class="input-group">
    <input type="text" class="form-control">
    <input type="text" class="form-control">
    <input type="text" class="form-control">
</div>
8

Input Group Prefix Button

Bootstrap input group prefix button code example

HTML
<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">Button</button>
  <input type="text" class="form-control">
</div>
HTML
<div class="input-group mb-3">
  <input type="text" class="form-control">
  <button class="btn btn-outline-secondary" type="button">Button</button>
</div>
9

checkbox

Bootstrap checkbox horizontal code example

HTML
<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

HTML
<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

HTML
<div>
  <input class="form-check-input" type="checkbox">
</div>

<div>
  <input class="form-check-input" type="radio" name="radioNoLabel">
</div>
12

Bootstrap select example code

Default size select

HTML
<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Large size select

HTML
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Small size select

HTML
<select class="form-select form-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
13

input file

Default size input type file example

HTML
<div class="mb-3">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control" type="file" id="formFile">
</div>

Large size input type file example

HTML
<div class="mb-3">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control form-control-lg" type="file" id="formFile">
</div>

Small size input type file example

HTML
<div class="mb-3">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control form-control-sm" type="file" id="formFile">
</div>
14

Bootstrap textarea code

textarea code

HTML
<div class="mb-3">
  <label for="id-14" class="form-label">Example textarea</label>
  <textarea class="form-control" rows="3"></textarea>
</div>
15

Bootstrap floating form labels

Input type text floating label

HTML
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="id15a" placeholder="Email">
  <label for="id15a">Email address</label>
</div>

Textarea floating label

HTML
<div class="form-floating">
  <textarea class="form-control" id="id15b" placeholder="Leave a comment here"></textarea>
  <label for="id15b">Comments</label>
</div>

Select floating label

HTML
<div class="form-floating">
  <select class="form-select" id="floatingSelect">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>
16

Bootstrap checkbox radio switch

Checkbox switches example

HTML
<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

Bootstrap checkbox toggle button

Checkbox toggle button example

HTML
<input type="checkbox" class="btn-check" id="btn-check">
<label class="btn btn-primary" for="btn-check">Checkbox toggle</label>
Report Problem