Lining Up Labels with Radio Buttons in Bootstrap

Lining up labels with radio buttons in bootstrap

If you add the 'radio inline' class to the control label in the solution provided by user1938475 it should line up correctly with the other labels. Or if you're only using 'radio' like your 2nd example just include the 'radio' class.

<label class="radio control-label">Some label</label>

OR for 'radio inline'

<label class="radio-inline control-label">Some label</label>

Aligning Bootstrap Radio Buttons with text

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>

Lining Labels with Radio buttons in Bootstrap 4

First you div was not closed properly and second I just replaced form-check class with form-group an now it seems working.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /><div class="container">  <form class="form-horizontal" method="post">    <div class="row">      <div class="form-group row col-lg-6">        <label for="firstName" class="col-3 col-form-label">First Name</label>        <div class="col-9">          <input type="text" class="form-control" />        </div>      </div>      <div class="form-group row col-lg-6">          <label class="col-3 col-form-label">Gender</label>          <div class="col-9">            <label class="custom-control custom-radio">              <input name="cat" type="radio" class="custom-control-input" value="1">              <span class="custom-control-indicator"></span>              <span class="custom-control-description">Male</span>            </label>            <label class="custom-control custom-radio">              <input id="mixed0" name="cat" type="radio" class="custom-control-input" value="0">              <span class="custom-control-indicator"></span>              <span class="custom-control-description">Female</span>            </label>          </div>        </div>      </div>    </div>  </form></div>

How to align a label with radio button on same line in Bootstrap Vue

Apply pt-2 Bootstrap padding utility class to b-form-radio-group component to make it all on the same line

Try this:

 <b-form-group label-cols-sm="1" label="Zobrazit">
  <b-form-radio-group class="pt-2" id="radio-group-2" v-model="absoluteValues" 
    name="radio-sub-component">
    <b-form-radio value="true">Hodnoty</b-form-radio>
    <b-form-radio value="false">Procenta</b-form-radio>
  </b-form-radio-group>
</b-form-group>

Align Radio-Buttons and its Labels

You can use this CSS:

.answers label {
  display: block;
  font-size: 20px;
  line-height: 30px;
  margin: 0 auto;
  width: 150px;
}
.answers {
  width: 100%;
}
.answers input[type="radio"] {
  height: 30px;
  line-height: 30px;
  vertical-align: bottom;
  width: 30px;
}

JSFiddle: http://jsfiddle.net/ghorg12110/uqyfbjsb/

Line up radio buttons in Bootstrap 3, regardless of label length

I am a moron; hacking Bootstrap 3's column tags seems to have worked well enough (OK, IE's being a pain, but...)

http://www.bootply.com/qy6Iag0Z9E

---

Related Topics