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.
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.
<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.
<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
<!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.
<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.
<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.
<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.
<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.
<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.
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.
Resources
You may also find the following resources useful:
Tailwind grid-How to use tailwind CSS grid templates in your project
How to create a Beautiful Responsive Navigation bar Using Tailwind CSS
Tailwind form-How to create and style a Responsive Form using Tailwind CSS
How to use tailwind CSS padding, margin and border in your project
How to create a beautiful React Bootstrap select with icons.
How to create a Beautiful Responsive Navigation bar Using Tailwind CSS
Tailwind Modal-How to create a React Modal using Tailwind CSS.
How to Implement a React Step Progress Bar Using Tailwind CSS
Top comments (0)