How can I arrange a series of radio buttons?

Joined
Aug 16, 2022
Messages
52
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.
Screenshot 2024-01-24 131650.png

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.
( It'll be nice to understand why your code works and mine didn't )

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>&nbsp;<SPAN style="color:#000000;font-weight:bold">&nbsp;&nbsp;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>&nbsp;<SPAN style="color: #000000">&nbsp;&nbsp;<B>Bad</B>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>&nbsp;<SPAN style="color: #000000">&nbsp;&nbsp;<B>Average</B>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>&nbsp;<SPAN style="color: #000000">&nbsp;&nbsp;<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-
 
Joined
Jul 4, 2023
Messages
370
Reaction score
41
Did you tried use: flex
[ working code on-line ]
CSS:
.container {
  border: 1px solid;
  border-color: #000000;
  padding: .5rem;
}
.form-check {
  display: flex;
  justify-content: center;
  gap: 5rem;
  align-items: center;
}
.form-check label {
  display: flex;
  align-items: center;     
}
.form-check label,
.form-check label input {
  cursor: pointer;
}
.form-check label i {
  color: black;
  font-size: 1.563rem;
  padding: 0 .25rem;
}
.form-check label #radio_experience2 + i,
.form-check label #radio_experience2:checked ~ span:last-child {
  color: red;
}
.form-check label #radio_experience3 + i,
.form-check label #radio_experience3:checked ~ span:last-child {
  color: blue;
}     
.form-check label #radio_experience4 + i,
.form-check label #radio_experience4:checked ~ span:last-child {
  color: green;
}
.form-check label span:last-child {
  color: black;
  font-weight: bold;
}
HTML:
  <body>
    <form>
      <div class="container">
        <div class="row">
          <div class="form-check">
            <label class="radio-inline">
              <input type="radio" class="form-check-input"  name="cExperience"
                     id="radio_experience1" value="declined" checked>
              <i class="bi bi-stoplights-fill" aria-hidden="true"></i>
              <span>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" aria-hidden="true"></i>
              <span>Bad</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" aria-hidden="true"></i>
              <span>Average</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" aria-hidden="true"></i>
              <span>Good</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>
 
Joined
Aug 16, 2022
Messages
52
Reaction score
2
Did you tried use: flex
[ working code on-line ]
CSS:
.container {
  border: 1px solid;
  border-color: #000000;
  padding: .5rem;
}
.form-check {
  display: flex;
  justify-content: center;
  gap: 5rem;
  align-items: center;
}
.form-check label {
  display: flex;
  align-items: center;    
}
.form-check label,
.form-check label input {
  cursor: pointer;
}
.form-check label i {
  color: black;
  font-size: 1.563rem;
  padding: 0 .25rem;
}
.form-check label #radio_experience2 + i,
.form-check label #radio_experience2:checked ~ span:last-child {
  color: red;
}
.form-check label #radio_experience3 + i,
.form-check label #radio_experience3:checked ~ span:last-child {
  color: blue;
}    
.form-check label #radio_experience4 + i,
.form-check label #radio_experience4:checked ~ span:last-child {
  color: green;
}
.form-check label span:last-child {
  color: black;
  font-weight: bold;
}
HTML:
  <body>
    <form>
      <div class="container">
        <div class="row">
          <div class="form-check">
            <label class="radio-inline">
              <input type="radio" class="form-check-input"  name="cExperience"
                     id="radio_experience1" value="declined" checked>
              <i class="bi bi-stoplights-fill" aria-hidden="true"></i>
              <span>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" aria-hidden="true"></i>
              <span>Bad</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" aria-hidden="true"></i>
              <span>Average</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" aria-hidden="true"></i>
              <span>Good</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>
Thank you for your time making this reply, VBService. I appreciate you for all of these suggestions you have given me.
I've been beating this issue around now, since perhaps January 15th, and failed with each attempt.
Your code does everything I wanted my code to so I'll will have to study your stuff "line by line" to see where I misunderstand the CSS stuff involved.
Thank you again, Sir.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,780
Messages
2,569,611
Members
45,284
Latest member
NicholeDum

Latest Threads

Top