CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfont-awesomevertical-alignment
user3183411
user3183411

Reputation: 335

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

Upvotes: 1

Views: 9545

Answers (4)

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 1

PalakM
PalakM

Reputation: 321

i did some changes in your dom as you want caret before radio button.you can set visibility of those caret when you dont want it to be visible as changing visibility will still occupy space on screen as compare to display:none which will affect indentation of radio

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

fiddle

Upvotes: 0

Praveen
Praveen

Reputation: 847

Try adding .radio span.button{ position:relative; top: 4px;} and input[type=radio] {margin:0;} to your css 

input[type=radio] {
  z-index: 3;
  width: 26px;
  height: 26px;
  margin:0;
  -moz-appearance: none;
}
label {
  font-weight: normal;
  font-size: 1.5em;
  cursor: pointer;
}
.question-label {
  margin-left: 15px;
}
.radio span.button{ position:relative; top: 4px;}
<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>

Upvotes: 1

Jones Joseph
Jones Joseph

Reputation: 4938

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: 5px;
  position:absolute;
  margin-top:3px;
}
<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>

Upvotes: 0

Related Questions