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 Stacked Checkbox with Indeterminate State

Enhance your forms with stacked checkboxes featuring an indeterminate state in Bootstrap 4. Learn how to create versatile checkbox layouts for improved user interaction and form functionality.

Author: Admin

Preview
Code

<div class="container mt-5">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkbox1" checked>
    <label class="form-check-label" for="checkbox1">
      Checked
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkbox2">
    <label class="form-check-label" for="checkbox2">
      Indeterminate
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkbox3">
    <label class="form-check-label" for="checkbox3">
      Unchecked
    </label>
  </div>
</div>

```
No Custom CSS
```

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    checkboxes[1].indeterminate = true;

Bootstrap 4 Checkboxes with Icons

Enhance user interaction on your website by adding icons to checkboxes with Bootstrap 4. Learn to incorporate visual cues alongside checkbox options to improve usability and user experience.

Author: Admin

Preview
Code

<div class="container">
  <div class="row">
    <div>
      <h4>Transport</h4>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="checkbox1">
        <label class="custom-control-label" for="checkbox1"><i class="fas fa-plane"></i> Plane</label>
      </div>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="checkbox2">
        <label class="custom-control-label" for="checkbox2"><i class="fas fa-car"></i> Car</label>
      </div>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="checkbox3">
        <label class="custom-control-label" for="checkbox3"><i class="fas fa-ship"></i> Boat</label>
      </div>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="checkbox4">
        <label class="custom-control-label" for="checkbox4"><i class="fas fa-taxi"></i> Taxi</label>
      </div>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="checkbox5">
        <label class="custom-control-label" for="checkbox5"><i class="fas fa-motorcycle"></i> Bike</label>
      </div>
    </div>
  </div>
</div>

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

Bootstrap 4 Checkbox Group with Description

Create checkbox groups with descriptive labels in Bootstrap 4. Learn how to organize and present multiple checkbox options alongside descriptions for improved user understanding and interaction.

Author: Admin

Preview
Code

<div class="container mt-5">
  <div class="border p-3">
    <div class="form-check mb-2">
      <input class="form-check-input" type="checkbox" value="" id="checkbox1" checked>
      <label class="form-check-label" for="checkbox1">
        Checkbox 1
        <small class="text-muted d-block">Description for Checkbox 1</small>
      </label>
    </div>
    <div class="form-check mb-2">
      <input class="form-check-input" type="checkbox" value="" id="checkbox2">
      <label class="form-check-label" for="checkbox2">
        Checkbox 2
        <small class="text-muted d-block">Description for Checkbox 2</small>
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="checkbox3" disabled>
      <label class="form-check-label" for="checkbox3">
        Checkbox 3
        <small class="text-muted d-block">Description for Checkbox 3</small>
      </label>
    </div>
  </div>
</div>

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

Bootstrap 4 Checkbox with Description

Enhance your forms with descriptive labels for checkboxes using Bootstrap 4. Learn how to provide additional context and information alongside checkbox options, improving user understanding.

Author: Admin

Preview
Code

<div class="container mt-5">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkbox1">
    <label class="form-check-label" for="checkbox1">
      Checkbox with Description
      <small class="text-muted d-block">This is a checkbox with a description.</small>
    </label>
  </div>
</div>

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

Bootstrap 4 Checkbox with Label in Different Styles

Enhance your forms with Bootstrap 4 checkboxes featuring labels in different styles. Learn how to customize checkbox labels to match your design preferences, improving form aesthetics and usability.

Author: Admin

Preview
Code

<div class="container mt-5">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkbox1">
    <label class="form-check-label font-weight-bold text-danger" for="checkbox1">
      Bold Red Label
    </label>
  </div>
  <div class="form-check mt-2">
    <input class="form-check-input" type="checkbox" value="" id="checkbox2">
    <label class="form-check-label font-italic text-success" for="checkbox2">
      Italic Green Label
    </label>
  </div>
  <div class="form-check mt-2">
    <input class="form-check-input" type="checkbox" value="" id="checkbox3">
    <label class="form-check-label font-weight-normal text-primary" for="checkbox3">
      Normal Weight Blue Label
    </label>
  </div>
</div>

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