DEV Community

Cover image for How to customized Bootstrap 5.2 checks and radios
Deotyma
Deotyma

Posted on

How to customized Bootstrap 5.2 checks and radios

Bootstrap is one of the more known and used UI frameworks. It is completely free and open source. Bootstrap 5 is based on HTML, CSS, and vanilla JavaScript. It permits the build of quickly fully responsive sites and is very customizable.

However, some elements like radios, checks, and switches are complicated to personalize.

Here there is documentation of Bootstrap checks and radios.

But how to customize those elements?
There is a pure design of checks and radios with Bootstrap 5.2

non customized bootstrap radios and checks

To examine how it is stylized it is necessary to inspect a website.

bootstrap radio css

Thanks to this analysis we see that circle in the middle of the radio input is an image. The same is for the checkbox and switch. We can see which class is necessary to change the background color of a checked element.

To change an element in the middle of the radio or checkbox I downloaded some images. Now I can change a css of each element:
This is a CSS for a switch box:

.form-switch .form-check-input {
  background-image: url(/ball-147676_640.png);
  background-color: yellow;
}

.form-switch .form-check-input:checked {
  background-image: url(/ball-147676_640.png);
  background-color: red;
  border-color: red;
}

.form-switch .form-check-input:focus {
  background-image: url(/ball-147676_640.png);
  box-shadow: 0 0 4px 4px violet;
  border-color: violet;
}
Enter fullscreen mode Exit fullscreen mode

switchbox:

switchbox

focused switchbox:

focused switchbox

active switchbox:

Image description

To personalize a radio we do the same:

.form-check-input:checked[type=radio] {
  background-image: url(/colors-155896_640.png);
  background-color: aquamarine;
  border-color: aquamarine;
}
.form-check-input:focus[type=radio] {
  box-shadow: 0 0 4px 4px aquamarine
}
Enter fullscreen mode Exit fullscreen mode

and this is a result:

customized radio button

It is time to see how it works for the checkbox:

.form-check-input:checked[type=checkbox]{
  background-image: url(/bootstrap.jpeg);
}

.form-check-input:focus[type=checkbox] {
  box-shadow: 0 0 4px 4px violet;
}
Enter fullscreen mode Exit fullscreen mode

customised checkbox

Although it is not obvious, it is possible to customize even those elements.

customised elements

The circle inside is an SVG so to change it I need to use a new SVG

This is a basic switch checkbox Bootstrap code:

 <div class="form-check form-switch back"&gt
        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
 </div>

I downloaded an image to the local repository image to replace a circle

And…

Top comments (0)