Welcome to another exciting instalment from Electronics Eternity! In today's video, we dive into the creation of custom Bootstrap radio buttons. While Bootstrap provides a variety of ready-made templates, customizing these elements can significantly enhance the user experience and the aesthetic appeal of your web applications. This blog emphasizes the significance of this video and provides a step-by-step breakdown of the code used to create beautiful, functional radio buttons.
Why Custom Radio Buttons?
Radio buttons are essential UI components in forms, allowing users to select one option from a predetermined set. The default styling can often be bland and uninviting. By customizing these buttons, you can make them more visually appealing and align them with your website's branding. This video is significant because it fills a gap in available resources—there's limited content online specifically addressing how to customize Bootstrap radio buttons effectively.
Below is the code used in the video :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Enabled and Disabled Checkbox</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style>
input[type="radio"] {
width: 4.2em;
height: 4.2em;
position: relative;
bottom: 17px;
right: 7px;
background-color: rgb(161, 215, 25);
border-color: rgb(17, 167, 14);
}
input[type="radio"]:checked {
width: 4.2em;
height: 4.2em;
position: relative;
bottom: 17px;
right: 7px;
background-color: rgb(16, 230, 166);
border-color: rgb(7, 7, 7);
}
div.custom2 {
background-color: rgb(73, 26, 215);
color: #ffffff;
margin-top: 0.5%;
padding: 0.5%;
}
</style>
</head>
<body class="container-fluid">
<div class="custom2">
<h1>Welcome to ElectronicsEternity</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<form>
<div class="form-check mt-4 mb-5 mx-3">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
ON
</label>
</div>
<div class="form-check mt-10 mx-3 mb-5">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
OFF
</label>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</div>
</form>
</body>
</html>You can further modify the look of the radio button by tweaking the below values
Custom Sizes: By changing the `width` and `height`, you can make the radio buttons larger or smaller to fit your design.
<style>
input[type="radio"] {
width: 4.2em;
height: 4.2em;Color Changes: The `background-color` property allows you to change the color of the radio button when selected. This can improve visibility and user engagement.
background-color: rgb(161, 215, 25);Positioning: Adjusting margins using `margin-top` and `margin-bottom` provides better spacing between form elements, enhancing readability.
<form>
<div class="form-check mt-4 mb-5 mx-3">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
ON
</label>For more detailed explanation, feel free check out my YouTube video on this
Hope you find this tutorial useful. Please Don't Forget to Like and Subscribe. Thank You :)
Comments