postImage

How to create Beautiful Bootstrap 5 Checkboxes and Radios .

blogImage

By Amarachi Iheanacho

Technical Writer

A Bootstrap 5 Checbox 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 opton 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

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.

1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/css/bootstrap.min.css"/>
2<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.

1<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/bootstrap.min.js"></script>
2<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/popper.min.js"></script>
3<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

1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/css/bootstrap.min.css"/>
8 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/css/cdb.min.css"/>
9 <title>Document</title>
10</head>
11<body>
12
13
14<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/bootstrap.min.js"></script>
15<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/popper.min.js"></script>
16<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/cdb.min.js"></script>
17
18</body>
19
20</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

1<div class="custom-check">
2 <input class="custom-check-input" type="checkbox" value="" id="defaultCheck1" />
3 <label class="custom-check-label" for="defaultCheck1">
4 Default checkbox
5 </label>
6</div>
7
8<div class="custom-check">
9 <input class="custom-check-input" type="checkbox" value="" id="defaultCheck2" disabled />
10 <label class="custom-check-label" for="defaultCheck2">
11 Disabled checkbox
12 </label>
13</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

1<div class="custom-check form-check-inline">
2 <input class="custom-check-input" type="checkbox" value="" id="Checkbox1" />
3 <label class="custom-check-label" for="Checkbox1">
4 Checkbox 1
5 </label>
6</div>
7
8<div class="custom-check form-check-inline">
9 <input class="custom-check-input" type="checkbox" value="" id="Checkbox2" />
10 <label class="custom-check-label" for="Checkbox2">
11 Checkbox 2
12 </label>
13</div>

Checkbox with differnt 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

1<div class="custom-check">
2 <input
3 class="custom-check-input text-primary bg-warning"
4 type="checkbox"
5 value=""
6 id="Checkbox3"
7 />
8 <label class="custom-check-label" for="Checkbox3">
9 checkbox 3
10 </label>
11</div>
12
13<div class="custom-check">
14 <input class="custom-check-input" type="checkbox" value="" id="Checkbox4" />
15 <label class="custom-check-label" for="Checkbox4">
16 checkbox 4
17 </label>
18</div>
19
20<div class="custom-check">
21 <input
22 class="custom-check-input border-primary text-primary"
23 type="checkbox"
24 value=""
25 id="Checkbox5"
26 />
27 <label class="custom-check-label text-primary" for="Checkbox5">
28 checkbox 5
29 </label>
30</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

1<div class="custom-radio">
2 <input type="radio" id="customRadio1" name="customRadio" class="custom-radio-input" />
3 <label class="custom-control-label" for="customRadio1">radio1</label>
4</div>
5<div class="custom-radio">
6 <input type="radio" id="customRadio2" name="customRadio" class="custom-radio-input" />
7 <label class="custom-control-label" for="customRadio2">radio2</label>
8</div>
9<div class="custom-radio">
10 <input type="radio" id="customRadio3" name="customRadio" class="custom-radio-input" />
11 <label class="custom-control-label" for="customRadio3">radio3</label>
12</div>
13<div class="custom-radio">
14 <input type="radio" id="customRadio4" name="customRadio" class="custom-radio-input" />
15 <label class="custom-control-label" for="customRadio4">radio4</label>
16</div>
17>

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

1<div>
2 <div class="custom-radio">
3 <input type="radio" id="customRadio5" name="customRadio2" class="custom-radio-input text-info">
4 <label class="custom-control-label" for="customRadio5"></label>
5 </div>
6 <div class="custom-radio">
7 <input type="radio" id="customRadio6" name="customRadio3" class="custom-radio-input text-danger">
8 <label class="custom-control-label" for="customRadio6"></label>
9 </div>
10 <div class="custom-radio">
11 <input type="radio" id="customRadio7" name="customRadi4" class="custom-radio-input text-primary">
12 <label class="custom-control-label" for="customRadio7"></label>
13 </div>
14 <div class="custom-radio">
15 <input type="radio" id="customRadio8" name="customRadi5" class="custom-radio-input text-dark">
16 <label class="custom-control-label" for="customRadio8"></label>
17 </div>
18</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.

Resources

You may also find the following resources useful:

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.Try contrast pro

ad-banner

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

Related Posts

Comments

...