|
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.
These are the following approaches:
To change the size of the radio button in Bootstrap, you can utilize the scale property. This CSS transform property allows you to scale the radio button element, making it larger or smaller without distorting its appearance.
Example: This example shows the customization of radio button by changing the size of radio button.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<style>
body {
margin: 10px;
}
.radio-lg .custom-radio-input {
top: 0.8rem;
scale: 1.4;
margin-right: 0.5rem;
}
.radio-lg .custom-radio-label {
padding-top: 13px;
}
</style>
</head>
<body>
<div class="custom-radio">
<input class="custom-radio-input"
type="radio" value="" id="radio-1"
name="exampleRadios" checked />
<label class="custom-radio-label"
for="radio-1">Regular radio</label>
</div>
<div class="custom-radio radio-lg">
<input class="custom-radio-input"
type="radio" value="" id="radio-2"
name="exampleRadios" checked />
<label class="custom-radio-label"
for="radio-2">Large radio</label>
</div>
</body>
</html>
Output:
Changing the Color of the Radio ButtonTo change the color of the radio button in Bootstrap, you can utilize custom CSS to style the radio button when it is in the checked state. This allows you to apply different colors to the radio button to match your design.
Example: This example shows the customization of radio button by changing the color of radio button.
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-radio .form-check-input:checked {
background-color: red;
border-color: red;
}
</style>
</head>
<body>
<div class="form-check custom-radio">
<input class="form-check-input"
type="radio" id="customRadio1"
name="customRadios" checked />
<label class="form-check-label"
for="customRadio1">Custom Radio 1</label>
</div>
<div class="form-check custom-radio">
<input class="form-check-input"
type="radio" id="customRadio2"
name="customRadios" />
<label class="form-check-label"
for="customRadio2">Custom Radio 2</label>
</div>
</body>
</html>
Output:
Changing the structure of the Radio buttonThe radio buttons are styled to have a Font Awesome icon as the indicator, with a custom background color and icon color when checked. The display: none; property hides the default radio buttons, allowing only the custom-styled icons to be visible.
Example: This example shows the customization of radio button by changing the structure of radio button.
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>
body {
margin: 10px;
}
.custom-radio .form-check-input {
display: none;
}
.custom-radio .form-check-label::before {
content: "\f192";
/* Font Awesome radio button icon */
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-radio .form-check-input:checked+.form-check-label::before {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="form-check custom-radio">
<input class="form-check-input"
type="radio" id="customRadio1"
name="customRadios" checked />
<label class="form-check-label"
for="customRadio1">Custom Radio 1</label>
</div>
<div class="form-check custom-radio">
<input class="form-check-input"
type="radio" id="customRadio2"
name="customRadios" />
<label class="form-check-label" f
or="customRadio2">Custom Radio 2</label>
</div>
</body>
</html>
Output:
|
