- Joined
- Aug 16, 2022
- Messages
- 54
- Reaction score
- 2
Hi everybody,
The code below will display a radio box container with four radio inputs.
As you can see, the four radios are crammed to one side of the container, and the components do not quite lineup with each other.
There are two things I've been beating myself up about for several days. I hope someone can help me with the right coding:
Many Thanks,
-Paul-
The code below will display a radio box container with four radio inputs.
As you can see, the four radios are crammed to one side of the container, and the components do not quite lineup with each other.
There are two things I've been beating myself up about for several days. I hope someone can help me with the right coding:
- I would like to evenly spread out each these radio buttons across the full width of the container.
- I would also like to align each button group, the button, the icon, and the value to the vertical centres, just because that will look better.
HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="RadioButtons.html">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap-5.3.2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<style>
.container {
border: 1px solid;
border-color: #000000;
width: 60%;
}
</style>
<title>In-Line Radio Buttons</title>
</head>
<body>
<form>
<div class="container">
<div class="row">
<div class="form-check">
<label class="radio-inline">
<input class="form-check-input" type="radio" name="cExperience" id="radio_experience1" value="Declined" checked>
<i class="bi bi-stoplights-fill" style="color: #000000 ; font-size: 1.563rem;" aria-hidden="true"></i> <SPAN style="color:#000000;font-weight:bold"> Declined</span>
</label>
<label class="radio-inline">
<input type="radio" class="form-check-input" name="cExperience" id="radio_experience2" value="bad">
<i class="bi-emoji-frown-fill" style="color: #FF0066; font-size: 1.563rem;" aria-hidden="true"></i> <SPAN style="color: #000000"> <B>Bad</B> </span>
</label>
<label class="radio-inline">
<input type="radio" class="form-check-input" name="cExperience" id="radio_experience3" value="average">
<i class="bi-emoji-neutral-fill" style="color: #3366FF ; font-size: 1.563rem;" aria-hidden="true"></i> <SPAN style="color: #000000"> <B>Average</B> </span>
</label>
<label class="radio-inline">
<input type="radio" class="form-check-input" name="cExperience" id="radio_experience4" value="good">
<i class="bi-emoji-wink-fill" style="color: #339900 ; font-size: 1.563rem;" aria-hidden="true"></i> <SPAN style="color: #000000"> <B>Good</B></span>
</label>
</div>
</div>
</div>
</form>
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
</body>
</html>Many Thanks,
-Paul-
