How to Customized Bootstrap 5 Checkbox?
Last Updated :
23 Jul, 2025
Bootstrap, a widely used customizing front-end framework, streamlines web development with its pre-built CSS and JavaScript components. Bootstrap 5 Checkbox enhances interactive forms and interfaces, offering customization options for styles, sizes, and validation, facilitating user selections.
There are several approaches to customize the Bootstrap 5 Checkbox which are as follows:
Changing the size of the Checkbox
To change the size of the checkbox in Bootstrap we can use scale property. The scale property is a CSS transform property that can be applied to the checkbox element to scale it up or down. By modifying the scale property, you can make the checkboxes larger or smaller without distorting their appearance.
Example: To demonstrate changing the size of a Bootstrap checkbox using the scale property.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
</head>
<style>
.checkbox-lg .custom-check-input {
top: 0.8rem;
scale: 1.4;
margin-right: 0.5rem;
}
.checkbox-lg .custom-check-label {
padding-top: 13px;
}
</style>
<body>
<div class="custom-check">
<input class="custom-check-input"
type="checkbox"
value=""
id="checkbox-1"
checked />
<label class="custom-check-label"
for="checkbox-1">Regular checkbox</label>
</div>
<div class="custom-check checkbox-lg">
<input class="custom-check-input"
type="checkbox"
value=""
id="checkbox-2"
checked />
<label class="custom-check-label"
for="checkbox-2">Large checkbox</label>
</div>
</body>
</html>
Output:
Customising Bootstrap 5 CheckboxChanging the color of the Checkbox
To change the color of checkbox we can add the required styles by overriding the existing styles. Let us take a look over the example
Example: To demonstrate customizing the color of checked checkbox by using the class `form-check-input:checked`.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<style>
.custom-checkbox .form-check-input:checked {
background-color: red;
border-color: red;
}
</style>
</head>
<body>
<div class="form-check custom-checkbox">
<input class="form-check-input"
type="checkbox"
id="exampleCheckbox" />
<label class="form-check-label"
for="exampleCheckbox"
>Custom Checkbox</label
>
</div>
</body>
</html>
Output:
Customising Bootstrap 5 CheckboxChanging the structure of the Checkbox
We can replace the default checkbox appearance with a custom icon or symbol to indicate the checked or unchecked state. This can be achieved by changing CSS pseudo-elements (::before or ::after) and background images or icon fonts. Let us take an example to understand,
Example: To demonstrate customizing the checkbox using the CSS psudo-elements.
HTML
<!DOCTYPE html>
<html>
<head>
<link
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
rel="stylesheet"
/>
<style>
.custom-checkbox .form-check-input {
display: none;
}
.custom-checkbox .form-check-label::before {
content: "\f0c8";
font-family: "Font Awesome 5 Free";
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
text-align: center;
line-height: 20px;
margin-right: 5px;
}
.custom-checkbox .form-check-input:checked
+ .form-check-label::before {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="form-check custom-checkbox">
<input class="form-check-input"
type="checkbox"
id="exampleCheckbox" />
<label class="form-check-label"
for="exampleCheckbox"
>Custom Checkbox</label
>
</div>
</body>
</html>
Output:
Customising Bootstrap 5 Checkbox
Similar Reads
How to Customize Bootstrap 5? To customize Bootstrap 5, adjust its appearance by using custom CSS to modify default styles or by utilizing Sass variables to customize design elements like colors, typography, and spacing. These methods enable you to control your project's visual presentation. Table of Content Custom CSSModifying
2 min read
How to Customize Bootstrap 5 Radios ? Bootstrap 5 radios provide a flexible and stylish way to create radio buttons in your forms. Customize their appearance and behavior easily with built-in classes. Enhance usability with various layout options, including inline and stacked radios, ensuring a responsive and accessible user experience.
3 min read
How to change Bootstrap Checkbox size ? Changing Bootstrap Checkbox size involves applying classes like form-check-input-lg for larger checkboxes or form-check-input-sm for smaller ones. Adjustments can be made through additional CSS styling as required. Syntax: <div class="form-check"> <input class="form-check-input" type="check
4 min read
How to Customize Bootstrap jQuery Plugins ? Bootstrap is a popular HTML, CSS, and JavaScript framework for building responsive, mobile-first web applications. It includes a library of jQuery plugins that provide various UI components and behaviors, such as modals, tabs, and carousels. While these plugins are useful out of the box, you may nee
4 min read
Bootstrap 5 Checks and Radios Outlined Styles Bootstrap 5 provides us with utility Checks and radios with outlined styles for different looks, designs,s and background colors. Checks and radios Outlined styles Classes: No special classes are used in Outlined styles. You can customize the component using Button Outline. Different variants of .bt
2 min read
Bootstrap 5 Input group Checkboxes and Radios Bootstrap 5 Input group Checkboxes and radios are used to pace the radios and checkboxes within an input group’s addon instead of text.Bootstrap 5 Input group Checkboxes and Radios Classes: There are no specific classes to add checkboxes and radios. To create the checkboxes and radios we use the for
3 min read