CODEWITHSUNDEEP
csstwitter-bootstrap
Bitwise
Bitwise

Reputation: 8451

Evenly separate radio buttons using bootstrap

My radio buttons are too close together and I would like them to evenly be displayed across the row using the bootstrap grid system. Any idea's on how I can accomplish this?enter image description here

    <div class="radio">
       <div class="row">
         <div class="col-md-12">
           <label>
             <input id="visitors_radio" name="user[role]" type="radio">
             Visitors
           </label>
           <label>
             <input id="staff_radio" name="user[role]" type="radio">
             Staff
           </label>
           <label>
             <input id="volunteer_radio" name="user[role]" type="radio">
             Volunteer
           </label>
         </div>
       </div>
    </div>

Upvotes: 0

Views: 1303

Answers (1)

Mox
Mox

Reputation: 2463

<div class="radio">
   <div class="row">
     <div class="col-md-4">
       <label>
         <input id="visitors_radio" name="user[role]" type="radio">
         Visitors
       </label>
     </div>
     <div class="col-md-4">
       <label>
         <input id="staff_radio" name="user[role]" type="radio">
         Staff
       </label>
     </div>
     <div class="col-md-4">
       <label>
         <input id="volunteer_radio" name="user[role]" type="radio">
         Volunteer
       </label>
     </div>
   </div>
</div>

Make use of the bootstrap grid to help you to achieve that.

Upvotes: 3

Related Questions