user3183411 user3183411 - 2 months ago 16
CSS Question

Aligning Bootstrap Radio Buttons with text

I am trying to get my radio buttons to align but I am having difficulty doing this. What I am trying to do is have the buttons align with an indentation because I am going to display a caret if the option has been selected. I also want the text to come up just a bit because it's not inline with the actual radio button.



input[type=radio] {
z-index: 3;
width: 26px;
height: 26px;
-moz-appearance: none;
}
label {
font-weight: normal;
font-size: 1.5em;
cursor: pointer;
}
.question-label {
margin-left: 15px;
}

<div class="radio">
<label>
<span class="button"><input type="radio" name="optionsRadios" value="20"></span>
<span class="question-label">True</span>
</label>
</div>

<div class="radio">
<label>
<span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
<span class="button"><input type="radio" name="optionsRadios" value="20"></span>
<span class="question-label">False</span>
</label>
</div>





Here is what it looks like right now.

enter image description here

Answer

So I did a few things to your code:

  1. Align the items inside the label using inline-blocks:

    .radio label > span {
        display: inline-block;
        vertical-align: middle;
    }
    

    This is better than positioning using px.

  2. Now add the caret icon to both radio so that the horizontal alignment will be automatically done (and you can contextually show the green caret). To make that work apply these:

    .correct-answer {
      color: green;
    }
    .wrong-answer {
      opacity: 0;
    }
    

Let me know your feedback. Thanks!

input[type=radio] {
  z-index: 3;
  width: 26px;
  height: 26px;
  -moz-appearance: none;
}
label {
  font-weight: normal;
  font-size: 1.5em;
  cursor: pointer;
}
.question-label {
  margin-left: 15px;
}
.radio label > span {
  display: inline-block;
  vertical-align: middle;
}
.correct-answer {
  color: green;
}
.wrong-answer {
  opacity: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<div class="radio">
  <label>
    <span><i class="fa fa-caret-right fa-2x wrong-answer" aria-hidden="true"></i></span>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">True</span>
  </label>
</div>

<div class="radio">
  <label>
    <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">False</span>
  </label>
</div>

Comments