Bootstrap class: .form-check

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>

Preview

Default checkbox

Default radio

Use Shuffle AI to build your own Bootstrap templates

Quickly design stunning Bootstrap templates with the power of Shuffle AI — no coding required.

Check .form-check in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _forms.scss:207 */
.form-check {
  position: relative;
  display: block;
  padding-left: $form-check-input-gutter;
}

/* _forms.scss:270 */
.form-check {
  width: 100%;
}

/* _forms.scss:311 */
.form-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding-left: 0;
}

Uses variables

/* _forms.scss:207 */
$form-check-input-gutter

/* _forms.scss:270 */


/* _forms.scss:311 */