Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

The Complete Guide to Using Bootstrap Checkbox Well

Would you like to add a checkbox component to your web app that uses Bootstrap? The Bootstrap checkbox component is one of many form elements that Bootstrap provides out of the box.

This form element allows users to select one or more options from a set and is useful for collecting feedback from your users.

In this tutorial, we’ll cover the basics of Bootstrap and why it’s important in modern web design. Then we’ll show you how to use the Bootstrap checkbox component.

Introduction to Bootstrap Checkbox

Bootstrap is one of the most popular frontend web frameworks. It simplifies front-end development by providing comprehensive pre-designed HTML, CSS, and JavaScript components.

Out of the box, it includes a responsive grid system, typography, forms, navigation bars, and various other UI elements. This allows developers to rapidly prototype and build responsive websites. Ensuring a seamless user experience for cross browser consistency.

Speaking of responsive design, PureCode provides over 10k customizable components to help you build your web pages faster. This reduces the time to build repetitive templates and lets you focus on defining the logic for your web application.

Start With PureCode

Bootstrap Checkbox Component

Bootstrap provides many components to style any aspect of your website. Among them are input types like the Checkbox component. This component is a fundamental input element that is crucial in web forms and user interactions. Checkboxes are commonly used to present users with multiple choices and allow them to select one or more options.

In Bootstrap, the Checkbox component is designed to integrate and adapt with other elements on your page easily. It comes with predefined styles that align with the Bootstrap design principles. And this ensures your website has a professional look with minimal styling efforts.

Importance of Checkboxes in Web Forms

Checkboxes are an integral part of web forms and used for a variety of purposes. They allow users to make multiple selections, opt into specific features, or confirm their agreement with terms and conditions.

Using checkboxes in Bootstrap ensures your website has an appealing design and also benefits from the framework’s built-in responsive design. This means that checkboxes automatically adapt to different screen sizes, ensuring a consistent and user-friendly experience across desktops, tablets, and smartphones.

Aside from being used as form elements, checkboxes can also be used to improve user interactions in various parts of a website. They can be utilized with JavaScript to create a dynamic toggle switch, enabling users to customize their experience by toggling specific options on or off.

Getting Started with Checkbox Toggles in Bootstrap

Prerequisites

Before diving into Bootstrap Checkbox, ensure that you have a basic understanding of HTML and CSS. You also need a basic knowledge of using Bootstrap. Please watch the video below if you need a refresher.

Installation and Setup

To begin using Bootstrap Checkbox, you need to add the Bootstrap framework to your project. There are 2 ways you can do this. First, you can download the Bootstrap library and add the files locally to your project. Alternatively, you can use a CDN to add the required files to your HTML template.

Installing Bootstrap

Start by downloading Bootstrap from the official website (https://getbootstrap.com/). You can choose between the compiled and minified CSS/JS files or use the Bootstrap CDN (Content Delivery Network) for quick integration.

If you downloaded the files, extract them and include the necessary CSS and JS files in your project.

For this tutorial, we’ll use the CDN method to quickly add Bootstrap to our project. Later in this tutorial, we’ll cover how to install Bootstrap to a React app.

Basic HTML Structure

Create a basic HTML file and link the Bootstrap stylesheets. We’ll use the CDN method in this example. To get started, copy and paste the code below to your HTML template. The code should be placed in between the <head> tag.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

After adding the CSS import, you’ll also need to import a JS script to your template. This ensures some interactions like opening a popup modal in Bootstrap work as intended. The code should ideally be added just above the closing body (</body>) tag on your page.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

To learn more about setting up Bootstrap, check out the video below.

Adding Bootstrap Checkbox

After adding the required Bootstrap files, you can proceed to use Bootstrap classes to style your page elements. Let’s create a basic checkbox.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Bootstrap Checkbox Example</title>
</head>
<body>

<div class="container mt-5">
    <h2>Bootstrap Checkbox Example</h2>

    <!-- Default Bootstrap Checkbox -->
    <div class="form-check">
        <input class="form-check-input" type="checkbox" id="defaultCheckbox">
        <label class="form-check-label" for="defaultCheckbox">
            Default Checkbox
        </label>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

In the code above, the form-check class is used for the container, form-check-input sets the styles for the checkbox input. form-check-label is used for the label associated with the checkbox.

We added a unique ID for the checkbox defaultCheckbox to associate it with its label. Here is how it looks when you preview the page.

Inline checkboxes example

Customizing Bootstrap Checkbox

One of the main benefits of using Bootstrap is that it provides classes to easily style your components. In this section, we’ll explore some customization options.

Styling Options

Bootstrap provides several classes to customize the appearance of checkboxes. You can modify checkbox colors using contextual classes. For example:

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="styledCheckbox1">
  <label class="form-check-label text-success" for="styledCheckbox1">
    Success Checkbox
  </label>
</div>

In this example, the text-success class changes the color of the label text to green. Similarly, you can use text-danger, text-primary, etc., for different colors.

Custom checkboxes

Changing Checkbox Colors

To change the color of the checkbox itself, you can use custom CSS or Bootstrap classes. Here is an example:

<div class="form-check">
  <input class="form-check-input bg-warning" type="checkbox" id="styledCheckbox2">
  <label class="form-check-label" for="styledCheckbox2">
    Warning Checkbox
  </label>
</div>

In the code above, the bg-warning class changes the background color of the actual button to yellow.

Custom checkbox with Bootstrap bg color

Sizing Options

Bootstrap provides classes to adjust the size of checkboxes. You can use form-check-lg for larger checkboxes or form-check-sm for smaller ones. Here is an example:

<div class="form-check form-check-lg">
  <input class="form-check-input" type="checkbox" id="largeCheckbox">
  <label class="form-check-label" for="largeCheckbox">
    Large Checkbox
  </label>
</div>

Similarly, for smaller checkboxes:

<div class="form-check form-check-sm">
  <input class="form-check-input" type="checkbox" id="smallCheckbox">
  <label class="form-check-label" for="smallCheckbox">
    Small Checkbox
  </label>
</div>

Associating Labels

For accessibility and users with assistive technologies like screen readers, it’s crucial to associate labels with checkboxes. This is done using the for attribute in the <label> tag, matching the id of the corresponding checkbox:

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="associatedCheckbox">
  <label class="form-check-label" for="associatedCheckbox">
    Checkbox with Associated Label
  </label>
</div>

Doing this ensures that clicking the label selects the checkbox. There are other label customizations like styling and positioning them for a better user experience. You can use Bootstrap classes for styling or add your own CSS classes :

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="customLabelCheckbox">
  <label class="form-check-label font-italic text-muted" for="customLabelCheckbox">
    Italicized and Muted Label
  </label>
</div>

In this example, the font-italic class makes the label italic, and the text-muted class gives it a muted color.

Adding Bootstrap Checkbox to a React Application

One of the perks of using Bootstrap is that it can be integrated into most frontend frameworks like React, Next, Vue, etc. To add Bootstrap Checkbox to a React app, you can either import it to your app using CDN or use the react-bootstrap library.

If you decide to use the CDN approach as we used in the section above, go ahead and add Bootstrap classes to your project. You can add these classes similar to how we added them in the section above.

If you’d like to use the React Bootstrap library to create your Checkboxes, you’ll first need to install the library to your project. React-bootstrap is a popular library that provides Bootstrap components as React components, making it easy to integrate Bootstrap styles and functionality into React applications.

To start, open a terminal window and navigate to your React app’s folder. Once there, copy and paste the code below to install Bootstrap.

// using npm
npm install react-bootstrap bootstrap

// using yarn
yarn add react-bootstrap bootstrap

After the installation completes, open the src/index.js file and add the following line at the beginning to import Bootstrap’s CSS:

import 'bootstrap/dist/css/bootstrap.min.css';

To test this out, create a new React component or modify an existing one to use the Checkbox component from react-bootstrap. For this example, we’ll create a component called CheckboxComponent.js:

// src/components/CheckboxComponent.js

import React from 'react';
import { Form } from 'react-bootstrap';

const CheckboxComponent = () => {
  return (
    <Form.Check
      type="checkbox"
      id="defaultCheck1"
      label="Default checkbox"
    />
  );
};

export default CheckboxComponent;

In this example, Form.Check is the react-bootstrap equivalent of a checkbox. You’ll need to specify the type as a checkbox using the type prop. The label prop lets you add a label that displays next to the checkbox element.

checkbox toggle buttons in React

To learn more about adding Bootstrap to a React application, check out the video below.

Handling Checkbox States

By default, a Bootstrap checkbox is in the unchecked state. The following code illustrates a simple unchecked checkbox:

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="defaultCheckbox">
  <label class="form-check-label" for="defaultCheckbox">
    Unchecked Checkbox
  </label>
</div>

To set a checkbox as checked, use the checked attribute or Bootstrap classes. Here’s an example using Bootstrap classes:

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="checkedCheckbox" checked>
  <label class="form-check-label" for="checkedCheckbox">
    Checked Checkbox
  </label>
</div>

The checked HTML attribute is added to the input element to set it as checked by default.

Handling State Change in React

If you’re using Bootstrap on a React app, you can use the onChange event handler to manage the state and customize actions to perform during each state. Here is an example:

// CheckboxComponent.js
import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap CSS
import { Form } from 'react-bootstrap';

const CheckboxComponent = () => {
  // State to manage the checked state of the checkbox
  const [isChecked, setIsChecked] = useState(false);

  // Function to handle checkbox state changes
  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <Form>
      <Form.Check
        type="checkbox"
        id="customCheckbox"
        label="Toggle Checkbox"
        checked={isChecked}
        onChange={handleCheckboxChange}
      />
    </Form>
  );
};

export default CheckboxComponent;

Code explanation:

  • We use the useState hook to manage the checkbox input’s state. The isChecked variable holds the current state, and setIsChecked is used to update it.

  • The handleCheckboxChange function toggles the state when the checkbox is clicked.

  • The Form.Check component from react-bootstrap is used for the checkbox. The checked attribute is set to the isChecked state, and the onChange handler is set to handleCheckboxChange.

Disabled State with Disabled Attribute

To disable a checkbox in Bootstrap, use the disabled attribute or the .disabled class. The following example shows a disabled checkbox:

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="disabledCheckbox" disabled>
  <label class="form-check-label" for="disabledCheckbox">
    Disabled Checkbox
  </label>
</div>

In this case, the disabled attribute is added to the input element. The disabled boolean attribute is set to true by default once added to your checkbox element. Once disabled, users won’t be able to interact with the checkbox element.

form check disabled checkbox

Checkboxes vs Radio Buttons

Choosing between Checkboxes and Radios is a common struggle for web developers. Although they function similarly, their default behavior varies.

Checkboxes and radios example

For instance, checkboxes allow users to select one or more options from a set. In contrast, radio buttons allow the user to select a single option from a list of options. Here is an example of a radio button.

<input type="radio" class="form-check-input"  id="radioButton">

Therefore, if you want to allow users to select multiple options from the multiple-choice field, using checkboxes is ideal for this use case. For instance, when implementing a survey and poll form to gather details about your users’ interests. A user can have more than one interest.

However, if the options on your multiple-choice field are mutually exclusive and users can only select one option from the set, we suggest using radio buttons. An example is implementing a quiz app with multiple options whereby a user can only select one correct answer from the set.

CheckboxesRadio Buttons
DescriptionOptions are independent of other checkboxes in the listMutually exclusive options, whereby selecting one option deselects others.
Allows Multiple Selection?YesNo
Standalone component?A standalone checkbox can be used as a switch to turn an option or setting on or off.It needs to have at least 2 options to function properly
When to useIf you require users to select one or more options from a listIf the user only needs to select one option from a set.

Creating a Newsletter Optin Form

Checkboxes have various use cases on a website. For instance, you can use them as checkbox toggle buttons to enable certain options on your app. You could also use them as a boolean field to know if a user has agreed to the terms and conditions on your site.

For this example, we’ll be creating a form that allows users to sign up for email newsletter. Here is a code example you can use as a building block.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Responsive Newsletter Opt-In Form</title>
</head>
<body>

<div class="container mt-5">
    <h2 class="mb-4">Subscribe to Our Newsletter</h2>

    <!-- Newsletter Opt-In Form to accept form submissions -->
    <form class="needs-validation" novalidate>
        <div class="mb-3">
            <label for="email" class="form-label">Email address</label>
            <input type="email" class="form-control" id="email" placeholder="Your Email" required>
            <div class="invalid-feedback">
                Please enter a valid email address.
            </div>
        </div>
        <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="subscribeCheckbox">
            <label class="form-check-label" for="subscribeCheckbox">Subscribe to our newsletter</label>
        </div>
        <button type="submit" class="btn btn-primary">Subscribe</button>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
newsletter form submission example

Frequently Asked Questions

Below we’ve answered some of the top questions about using Checkboxes in Bootstrap.

How to create a checkbox in Bootstrap?

To create a checkbox in Bootstrap, you can use the following HTML structure, incorporating Bootstrap’s styling classes:

<div class="form-check form-control-sm">
  <input class="form-check-input" type="checkbox" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>

This code uses the Bootstrap class form-check for the container, form-check-input for the checkbox input, and form-check-label for the label associated with the checkbox.

How do I add a checkbox to an input box?

If you want to associate a checkbox with an input box, you can use the following structure:

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="myCheckbox">
  <label class="form-check-label" for="myCheckbox">Check me</label>
</div>

<input type="text" id="myInput" placeholder="Type something...">

The checkbox and input box are independent elements, but you can use JavaScript to link their functionalities if needed.

How to make checkbox bigger in Bootstrap?

To make a checkbox bigger in Bootstrap, you can use utility classes such as form-check-lg or form-check-xl to adjust the size. For example:

<div class="form-check form-check-lg">
  <input class="form-check-input" type="checkbox" id="largeCheckbox">
  <label class="form-check-label" for="largeCheckbox">Large Checkbox</label>
</div>

Similarly, you can use form-check-sm for a smaller checkbox if you’d like.

How do you style checkboxes in Bootstrap 5?

Bootstrap 5 provides styling classes to customize checkboxes. The form-check class is used for the container, form-check-input for the checkbox, and form-check-label for the label. Additional classes like form-check-inline can be used to align checkboxes in the same horizontal row or create inline group checkboxes.

Styling Your Web App With Bootstrap

Bootstrap is the most popular frontend framework that helps you speed up development time. It can also be integrated with projects built using React and Vue.

In this tutorial, we’ve explained the basics of using Bootstrap and how to style checkboxes in Bootstrap. We also covered some advanced concepts like handling checkbox state change. This should help you get started with using checkbox HTML elements on your web page.

If you’re looking to speed up your development time, consider using PureCode.ai. PureCode provides over 10k AI-generated templates that can be integrated into your web pages to help you build UI faster.

Access PureCode’s Templates

Further reading:

If this article was helpful, check out our other styling tutorials to improve your skills as a frontend web developer.

David Ozokoye

David Ozokoye

Software Engineer and Technical Writer