Forms

Bootstrap offers a wide range of form controls. Learn about each individual form input in our Bootstrap 4 inputs tutorial. And learn about form options and classes in our Bootstrap 4 forms tutorial.

Form Controls

We have restyled the default .form-control input inside the Lazy Kit.

<!-- simple -->
<div class="form-group">
  <input type="email" class="form-control" id="email" placeholder="Your Email Address">
</div>

<!-- with icon -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1"><i class="fas fa-user"></i></span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

Checkboxes

Custom checkboxes can be created using the .custom-checkbox custom control modifier class.

<div class="form-group">
  <div class="custom-control custom-checkbox my-2">
    <input type="checkbox" class="custom-control-input" id="customCheck1" checked>
    <label class="custom-control-label" for="customCheck1">Hozier</label>
  </div>
  <div class="custom-control custom-checkbox my-2">
    <input type="checkbox" class="custom-control-input" id="customCheck2">
    <label class="custom-control-label" for="customCheck2">The 1975</label>
  </div>
  <div class="custom-control custom-checkbox my-2">
    <input type="checkbox" class="custom-control-input" id="customCheck2" checked disabled>
    <label class="custom-control-label" for="customCheck3">Billie Eilish</label>
  </div>

  <div class="custom-control custom-checkbox my-2">
    <input type="checkbox" class="custom-control-input" id="customCheck4" disabled>
    <label class="custom-control-label" for="customCheck4">Alt-J</label>
  </div>
</div>

Radio Buttons

Custom radio buttons can be created using the .custom-radio control modifier class.

<div class="form-group">
  <div class="custom-control custom-radio my-2">
    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked>
    <label class="custom-control-label" for="customRadio1">Glastonbury</label>
  </div>
  <div class="custom-control custom-radio my-2">
    <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio2">Coachella</label>
  </div>
  <div class="custom-control custom-radio my-2">
    <input type="radio" id="customRadio3" name="customRadio2" class="custom-control-input" checked disabled>
    <label class="custom-control-label" for="customRadio3">Primavera</label>
  </div>
  <div class="custom-control custom-radio my-2">
    <input type="radio" id="customRadio4" name="customRadio2" class="custom-control-input" disabled>
    <label class="custom-control-label" for="customRadio4">Burning Man</label>
  </div>
</div>

Toggles

To create toggle, you can use the .custom-toggle class.

<div class="form-group">
  <div class="custom-control custom-switch my-2">
    <input type="checkbox" class="custom-control-input" id="customSwitch1" checked>
    <label class="custom-control-label" for="customSwitch1">Music</label>
  </div>
  <div class="custom-control custom-switch my-2">
    <input type="checkbox" class="custom-control-input" id="customSwitch2">
    <label class="custom-control-label" for="customSwitch2">Movies</label>
  </div>
  <div class="custom-control custom-switch my-2">
    <input type="checkbox" class="custom-control-input" id="customSwitch3" checked disabled>
    <label class="custom-control-label" for="customSwitch3">Crafts</label>
  </div>
  <div class="custom-control custom-switch my-2">
    <input type="checkbox" class="custom-control-input" id="customSwitch3" disabled>
    <label class="custom-control-label" for="customSwitch3">DIY</label>
  </div>
</div>

Select Menues

Give the classic <select> a new look with the .custom-select class.

<div class="form-group">
  <select class="custom-select">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

File Browsers

And you can also style the input for choosing files with the .custom-file class.

<div class="input-group">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile02">
    <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
  </div>
</div>