Bootstrap Form Inputs Textbox Checkbox

Bootstrap version 5 Form Inputs, radio button checkbox, input text, textarea example codes

Bootstrap version 5 Input Floating labels

Textbox Sizing

Bootstrap input text size small large

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

Textbox with vertical label

Bootstrap input form vertical code example

Name

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

Textbox with Horizontal label

Bootstrap input form horizontal code example

Name

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

Textbox with help text

Bootstrap input help text code example

username username a-z only

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

input-group prefix

Bootstrap input prefix text or button left right center code example

<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

<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

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

<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

<div class="input-group">
    <span class="input-group-text">With textarea</span>
    <textarea class="form-control"></textarea>
</div>

First and last name

<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

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

Textbox grid

Bootstrap input grid code example

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

Textbox group

Bootstrap input group inline code example

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

Input Group Prefix Button

Bootstrap input group prefix button code example

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

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

checkbox

Bootstrap checkbox horizontal code example

Default

Checked checkbox

disabled checkbox

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

checkbox inline

Bootstrap checkbox inline code example

1 checkbox

2 disabled

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

Bootstrap checkbox radio without labels

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

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

Bootstrap select example code

Default size select

<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

<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

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

input file

Default size input type file example

file input

<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

file input

<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

input example

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

Bootstrap textarea code

textarea code

Example textarea

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

Bootstrap floating form labels

Input type text floating label

Email address

<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

Comments

<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

Works with selects

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

Bootstrap checkbox radio switch

Checkbox switches example

Default switch

Checked switch

Disabled switch

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

Bootstrap checkbox toggle button

Checkbox toggle button example

Checkbox toggle

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

Report Problem