7+ Checkbox Components - Bootstrap

Checkboxes are essential elements in web forms, allowing users to select one or more options from a list of choices. With Bootstrap, creating visually appealing and user-friendly checkboxes is straightforward. In this collection, we've compiled a variety of Bootstrap checkbox designs that you can seamlessly incorporate into your website's forms. Whether you're building a registration form, a survey, or any other type of input-based interaction, our collection offers options to enhance user experience and streamline the data selection process. Let's explore how Bootstrap checkboxes can improve the usability and aesthetics of your website's forms!

Bootstrap 4 Custom Checkboxes

Elevate user interaction on your website by incorporating custom checkboxes using Bootstrap 4.

Author: Admin

Preview
Code

<div class="container mt-5">
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1" checked>
    <label class="custom-control-label" for="customCheck1">Checked</label>
  </div>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck2">
    <label class="custom-control-label" for="customCheck2">Unchecked</label>
  </div>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck3" disabled>
    <label class="custom-control-label" for="customCheck3">Disabled</label>
  </div>
</div>

.custom-checkbox .custom-control-label::before {
  border: 1px solid #007bff;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
  background-color: #007bff;
  border-color: #007bff;
}
.custom-checkbox .custom-control-input:focus~.custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

```
No need of JavaScript
```

Bootstrap 4 Inline Checkboxes

Effortlessly add inline checkboxes to your forms using Bootstrap 4. Learn how to organize checkbox options horizontally for a streamlined and compact form layout.

Author: Admin

Preview
Code

<div class="container mt-5">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" value="" id="inlineCheckbox1" checked>
    <label class="form-check-label" for="inlineCheckbox1">
      Checked
    </label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" value="" id="inlineCheckbox2">
    <label class="form-check-label" for="inlineCheckbox2">
     Unchecked
    </label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" value="" id="inlineCheckbox3" disabled>
    <label class="form-check-label" for="inlineCheckbox3">
     Disabled
    </label>
  </div>
</div>

```
No Custom CSS
```
```
No need of JavaScript
```

Bootstrap 4 Default Checkbox

Easily add default checkboxes to your forms using Bootstrap 4. Learn how to create straightforward checkbox options for user selection, enhancing form functionality and user interaction.

Author: Admin

Preview
Code

<div class="container mt-5">
  <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>

```
No Custom CSS
```
```
No need of JavaScript
```