How to create Beautiful Bootstrap 5 Checkboxes and Radios .
Tags: tailwindcss, webdev, codenewbie
Published: 2022-01-19 07:52:45

---
title: How to create Beautiful Bootstrap 5 Checkboxes and Radios .
published: True
date: 2021-01-10 01:16:04 UTC
tags: ['tailwindcss', 'webdev','codenewbie']
canonical_url: https://www.devwares.com/blog//how-to-create-beautiful-bootstrap-5-checkbox
---

A Bootstrap 5 Checkbox is a user interface component that is used to allow a user choose an item or several items from a group of options. They differ from radio button in the fact that they are can allow a user select multiple options, while a radio button exists for a user to choose one and only one option from the group of options.

A Bootstrap 5 Checkbox looks a lot like a you think it would, you have seen some in paper government forms, school forms, health insurance forms and in this section of the tutorial we are going to walk through creating these buttons with a UI library called Contrast.

## Table Of Contents

- What are we building? 
- Prerequisites
- Understanding what Contrast is
- Adding the Contrast library CDN
- Creating our Bootstrap 5 Checkbox
- Radio Buttons
- Conclusion
- Resources

## What we are building

In this article we are going to create bootstrap 5 checkboxes and radio buttons with Contrast.

![Bootstrap 5 Checkboxes](https://www.devwares.com/blog/images/default-checkboxes.PNG)

## Prerequisites

To make the most of this article, it is important that you have the following:

- A basic understanding of HTML.
- A basic understanding of CSS.
- A basic understanding of JavaScript

## Understanding what Contrast is

Contrast or Contrast Design Bootstrap is an elegant bootstrap UI kit featuring over 2000+ essential components. Contrast helps simplify the web development process and can be integrated with any project to build mobile-first, responsive, and elegant websites and web apps.

## Adding the Contrast library CDN

To create our Bootstarp 5 Chcekboxes and Radio buttons we are going to use the Contrast Bootstrap library CDN.

We include the CSS CDN responsible for the Bootstrap styling in the `<head>` in our HTML file.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/css/cdb.min.css"/>

```

After including the CSS CDN links, we then include the JavaScript CDN link responsible for creating dynamic components at the bottom of our project. We do this because we want our components to load up before functionalities like interactivity and dynamicity.

```html

<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/cdb.min.js"></script>

```

After adding the CDNs our HTML file should look like this

```html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/css/cdb.min.css"/>
    <title>Document</title>
</head>
<body>
 

<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/cdb.min.js"></script>

</body>

</html>

```

## Creating our Bootstrap 5 Checkbox

With Contrast Bootstrap Checkboxes we get access to three different kinds of checkboxes, which are :

- Default Checkbox
- Inline Checkbox
- Checkbox with different styling.

## Default Checkbox

To create a bootstrap 5 checkbox we wrap the input elements in a `div` whose class is `custom-check`, the input element with a `type` of `checkbox` can receive a `disabled` prop inorder to disable the input element.

![Bootstrap 5 Checkboxes](https://www.devwares.com/blog/images/default-checkboxes.PNG)

```html

<div class="custom-check">
  <input class="custom-check-input" type="checkbox" value="" id="defaultCheck1" />
  <label class="custom-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>

<div class="custom-check">
  <input class="custom-check-input" type="checkbox" value="" id="defaultCheck2" disabled />
  <label class="custom-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

```

## Inline Checkbox

The Bootstrap 5 inline checkbox is the kind of checkbox that arranges its options side-to-side, to achieve this we use a class name of `form-check-inline` in the `div` wrapping the input elements. This is however only available to PRO users.

![Bootstrap 5 Checkboxes](https://www.devwares.com/blog/images/inline-checkbox.PNG)

```html

<div class="custom-check form-check-inline">
  <input class="custom-check-input" type="checkbox" value="" id="Checkbox1" />
  <label class="custom-check-label" for="Checkbox1">
    Checkbox 1
  </label>
</div>

<div class="custom-check form-check-inline">
  <input class="custom-check-input" type="checkbox" value="" id="Checkbox2" />
  <label class="custom-check-label" for="Checkbox2">
    Checkbox 2
  </label>
</div>

```

## Checkbox with different styling.

With the Contrast Bootstrap PRO package you can have access to more than just the default styling for the checkbox, you can also define the stylings for the checkbox in the `class` prop of the input element.

![Bootstrap 5 Checkboxes](https://www.devwares.com/blog/images/checkbox-different-styling.PNG)

```html
<div class="custom-check">
  <input
    class="custom-check-input text-primary bg-warning"
    type="checkbox"
    value=""
    id="Checkbox3"
  />
  <label class="custom-check-label" for="Checkbox3">
    checkbox 3
  </label>
</div>

<div class="custom-check">
  <input class="custom-check-input" type="checkbox" value="" id="Checkbox4" />
  <label class="custom-check-label" for="Checkbox4">
    checkbox 4
  </label>
</div>

<div class="custom-check">
  <input
    class="custom-check-input border-primary text-primary"
    type="checkbox"
    value=""
    id="Checkbox5"
  />
  <label class="custom-check-label text-primary" for="Checkbox5">
    checkbox 5
  </label>
</div>

```

## Radio Buttons

Similar to the Contrast Bootsrap 5 Checkboxes, we get not just one type of bootstrap 5 radio buttons but two, these radio button types are :

- Single Radio button
- Radio button Group with colors

## Single Radio Button

To create Bootstrap 5 radio buttons with Contrast we use input elements with its `type` values set to `radio`, next we wrap these input elements ( depending on how many radio buttons we want in our project ) in a `div` with its `class` property set to `custom-radio`.

![Bootstrap 5 Radio Button](https://www.devwares.com/blog/images/default-radio.PNG)

```html

<div class="custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-radio-input" />
  <label class="custom-control-label" for="customRadio1">radio1</label>
</div>
<div class="custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-radio-input" />
  <label class="custom-control-label" for="customRadio2">radio2</label>
</div>
<div class="custom-radio">
  <input type="radio" id="customRadio3" name="customRadio" class="custom-radio-input" />
  <label class="custom-control-label" for="customRadio3">radio3</label>
</div>
<div class="custom-radio">
  <input type="radio" id="customRadio4" name="customRadio" class="custom-radio-input" />
  <label class="custom-control-label" for="customRadio4">radio4</label>
</div>
>

```

## Radio Button Group with Colors

A bootstrap 5 radio button group is a group of radio buttons which usually share the same styles. For example if you were looking to create four different radio buttons, it would be stressful to create them individually and that is the problem bootstrap 5 is looking to solve.

![Bootstrap 5 Radio Button Group](https://www.devwares.com/blog/images/radio-button-group.PNG)

```html
<div>
    <div class="custom-radio">
        <input type="radio" id="customRadio5" name="customRadio2" class="custom-radio-input text-info">
        <label class="custom-control-label" for="customRadio5"></label>
    </div>
    <div class="custom-radio">
        <input type="radio" id="customRadio6" name="customRadio3" class="custom-radio-input text-danger">
        <label class="custom-control-label" for="customRadio6"></label>
    </div>
    <div class="custom-radio">
        <input type="radio" id="customRadio7" name="customRadi4" class="custom-radio-input text-primary">
        <label class="custom-control-label" for="customRadio7"></label>
    </div>
    <div class="custom-radio">
        <input type="radio" id="customRadio8" name="customRadi5" class="custom-radio-input text-dark">
        <label class="custom-control-label" for="customRadio8"></label>
    </div>
</div>

```

## Conclusion

In this article we discussed what Contrast is and why you would need to use it in your project. Next, we walked through how we would create bootstrap 5 checkboxes and radio buttons using the contrast library.


### Create Stunning Websites and Web Apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking [here](https://cdbootstrap-demo.netlify.app).

![Contrast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuz057uo4vkmvma7bdom.png)

Contrast Bootstrap PRO was built using the most popular CSS 
framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components. Learn more about [contrast](https://www.devwares.com/product/bootstrap-contrast-pro).



## Resources

You may also find the following resources useful:

- [Link to Github Repo](https://github.com/Iheanacho-ai/devwares-checkboxes-and-radio)

- [Contrast Bootstrap Checkbox Documentation](https://www.devwares.com/docs/contrast/javascript/components/checkbox)

- [Contrast Bootstrap Radio Documentation](https://www.devwares.com/docs/contrast/javascript/components/radio)

- [Get Contrast PRO](https://www.devwares.com/product/bootstrap-contrast-pro)

- [How to create Tailwind CSS Modal](https://www.devwares.com/blog/how-to-create-tailwind-css-modal)

- [How to use tailwind css in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

[Get Contrast PRO](https://www.devwares.com/product/contrast-pro)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to create a beautiful Bootstrap Data table with Icons](https://www.devwares.com/blog/create-datatable-with-contrast/)

- [How to create a React date picker.](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/create-forms-with-contrast/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)