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.
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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 Checkbox
How to Customized Bootstrap 5 Checkbox?
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:
Table of Content
- Changing the size of the Checkbox
- Changing the color of the Checkbox
- Changing the structure of the Checkbox
Contact Us