CODEWITHSUNDEEP
htmlcsstwitter-bootstrapradio-buttontwig
Anona
Anona

Reputation: 253

How to align label and radio button?

When you read this... I probably still haven't solved my issue,

I'm trying to align the label and radiobutton, I have tried alot of "Solutions", but nothing works. I have no css on the radio buttons that i created myself.

Output: http://prntscr.com/5am898

My Code:

<div class="row">
   <div class="col-md-12">
       <div class="btnRadio">
           <label class="radio-inline" for="gal2015lbl">
               <input name="galTab" id="gal2015" value="2015" type="radio">2015
           </label>
           <label class="radio-inline" for="gal2014lbl">
               <input name="galTab" id="gal2014" value="2014" type="radio">2014
           </label>
           <label class="radio-inline" for="gal2013lbl">
               <input name="galTab" id="gal2013" value="2013" type="radio">2013
           </label>
           <label class="radio-inline" for="gal2012lbl">
               <input name="galTab" id="gal2012" value="2012" type="radio">2012
           </label>
           <label class="radio-inline" for="galOtherlbl">
               <input name="galTab" id="galOther" value="Anders" type="radio">And
           </label>
       </div>
   </div>
</div>

Upvotes: 1

Views: 1561

Answers (2)

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

put the label in label tag like 

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

try

FIDDLE DEMO

<div class="row">
   <div class="col-md-12">
       <div class="btnRadio">

               <input name="galTab" id="gal2015" value="2015" type="radio">
               <label class="radio-inline" for="gal2015lbl">2015</label>

               <input name="galTab" id="gal2014" value="2014" type="radio"> 
               <label class="radio-inline" for="gal2014lbl">2014</label>

               <input name="galTab" id="gal2013" value="2013" type="radio">
               <label class="radio-inline" for="gal2013lbl">2013</label>

               <input name="galTab" id="gal2012" value="2012" type="radio" />
               <label class="radio-inline" for="gal2012lbl">2012</label>

               <input name="galTab" id="galOther" value="Anders" type="radio"/>
               <label class="radio-inline" for="galOtherlbl">And</label>
       </div>
   </div>
</div>

Upvotes: 1

Nick
Nick

Reputation: 3281

Try placing the input outside the label.

<label class="radio-inline" for="galOtherlbl">
    And
</label>
<input name="galTab" id="galOther" value="Anders" type="radio">

Upvotes: 1

Related Questions