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.

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

Elevate the design and functionality of your forms with Bootstrap 4 checkboxes featuring icons from Font Awesome. This guide will walk you through the process of implementing and customizing checkboxes with icons using Bootstrap 4 and Font Awesome, ensuring they blend seamlessly with your website's design.

Step 1: Copy the Code Snippet

Begin by copying the HTML code snippet provided above. This snippet includes the necessary structure and styles to create checkboxes with icons using Bootstrap 4 and Font Awesome. Select the code, click the copy button, and paste it into your HTML file where you want the checkboxes to appear.

Step 2: Link Bootstrap CSS

Ensure Bootstrap's CSS is linked correctly in your HTML document. Add the following <link> tag in the <head> section to import Bootstrap's stylesheet:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

Step 3: Link Font Awesome CSS

Next, link the Font Awesome CSS to include icons in your checkboxes. Add the following <link> tag in the <head> section of your HTML document:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Step 4: Customize and Make it Yours

Personalize the checkboxes and icons to align with your website's design and functionality requirements. Modify the styles, colors, sizes, and labels using Bootstrap's built-in classes or custom CSS. Experiment with different icon placements, add descriptive text or integrate with JavaScript for enhanced functionality tailored to your users' needs.

By following these steps, you can easily integrate and customize Bootstrap 4 checkboxes with icons on your website, providing a clear and visually appealing way for users to interact with forms. Make the checkboxes with icon components your own by adjusting styles, interactions, and functionality to align perfectly with your website's design and user experience goals.

Code Explanation

Container and Row:

<div class="container">
  <div class="row">
    <div>
      ...
    </div>
  </div>
</div>

<div class="container">: This creates a Bootstrap container, which is a responsive, fixed-width container that adapts to the screen size.
<div class="row">: This creates a Bootstrap row, used for horizontal grouping of columns.

Transport Heading:

<h4>Transport</h4>

<h4>Transport</h4>: This adds a heading with the text "Transport" styled as an <h4> heading, which typically renders as a smaller heading.

Checkboxes:

Each checkbox is created with a similar structure. Here's an example for the first checkbox:

<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">: This creates a container for a custom-styled checkbox using Bootstrap classes.
<input type="checkbox" class="custom-control-input" id="checkbox1">: This creates the checkbox input. The class="custom-control-input" applies custom styles from Bootstrap. The id="checkbox1" uniquely identifies this checkbox.
<label class="custom-control-label" for="checkbox1"><i class="fas fa-plane"></i> Plane</label>: This creates a label for the checkbox. The for="checkbox1" attribute links the label to the checkbox with id="checkbox1". Inside the label, <i class="fas fa-plane"></i> uses Font Awesome to add a plane icon, followed by the text "Plane".

Additional Checkboxes:

The other checkboxes follow the same structure as the first one but with different icons and text. Here are the respective changes for each:

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

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

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

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