Bootstrap 3.x: How to horizontal align, evenly space inlined radio buttons?

Question

My WebApp generates the following code:

<div class="form-group" id="birthDate_field">   
    <label class="control-label sr-only" for="birthDate">Birth date</label>
    <div class="input-group">
        <span class="input-group-addon"><span class="fa fa-birthday-cake"></span></span>
        <input type="date" id="birthDate" name="birthDate" value="" class="form-control form-control input-lg" placeholder="Birth date">
    </div>
</div>
<div class="form-group" id="gender_field">
    <div class="input-group">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <label class="radio-inline" for="gender_female">
            <input type="radio" id="gender_female" name="gender" value="female" required="true">
            <i class="fa fa-female"></i> Female
        </label>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <label class="radio-inline" for="gender_male">
            <input type="radio" id="gender_male" name="gender" value="male" required="true">
            <i class="fa fa-male"></i> Male
        </label>
    </div>
</div>
<div class="form-group" id="email_field">
    <label class="control-label sr-only" for="email">Email</label>
    <div class="input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
        <input type="email" id="email" name="email" value="" class="form-control form-control input-lg" placeholder="Email">
    </div>
</div>  

Which results in the following output:

However, there I am horizontally aligning the buttons using blank spaces which is a terrible approach. How do you do this in Bootstrap 3.x? Also would be great wrapping the radio buttons in a box that matches in dimensions the ones on top and bottom.

Answer 1

CSS

.gender{
   display : inline-block;
   width : 42%;
   padding : 5px;
   margin-right : 5%;
}

html

 <div class="form-group" id="birthDate_field">   
     <label class="control-label sr-only" for="birthDate">Birth date</label>
         <div class="input-group">
             <span class="input-group-addon"><span class="fa fa-birthday-cake"></span></span>
             <input type="date" id="birthDate" name="birthDate" value="" class="form-control form-control input-lg" placeholder="Birth date">
         </div>
 </div>
 <div class="form-group" id="gender_field">
     <div class="input-group">

    <span class="gender">

         <label class="radio-inline" for="gender_female">
             <input type="radio" id="gender_female" name="gender" value="female" required="true">
             <i class="fa fa-female"></i> Female
         </label>

    </span>
    <span class="gender">

         <label class="radio-inline" for="gender_male">
             <input type="radio" id="gender_male" name="gender" value="male" required="true">
             <i class="fa fa-male"></i> Male
         </label>

    </span>

     </div>
 </div>
 <div class="form-group" id="email_field">
     <label class="control-label sr-only" for="email">Email</label>
        <div class="input-group">
             <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
             <input type="email" id="email" name="email" value="" class="form-control form-control input-lg" placeholder="Email">
        </div>
 </div> 

Answer 2

In the demo below, you will see that the icons align perfectly. Please check your code to remove additional css which might be affecting the layout.

If in case, you cannot remove the additional css.

Use display:flex and then align-items: center || baseline on #gender-field's input-group

Hope this helps.

#gender_field .input-group > label:first-child{
  padding: 0 30px 0 60px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



<div class="form-group" id="birthDate_field">   
    <label class="control-label sr-only" for="birthDate">Birth date</label>
    <div class="input-group">
        <span class="input-group-addon"><span class="fa fa-birthday-cake"></span></span>
        <input type="date" id="birthDate" name="birthDate" value="" class="form-control form-control input-lg" placeholder="Birth date">
    </div>
</div>
<div class="form-group" id="gender_field">
    <div class="input-group">
        <label class="radio-inline" for="gender_female">
            <input type="radio" id="gender_female" name="gender" value="female" required="true">
            <i class="fa fa-female"></i> Female
        </label>
        <label class="radio-inline" for="gender_male">
            <input type="radio" id="gender_male" name="gender" value="male" required="true">
            <i class="fa fa-male"></i> Male
        </label>
    </div>
</div>
<div class="form-group" id="email_field">
    <label class="control-label sr-only" for="email">Email</label>
    <div class="input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
        <input type="email" id="email" name="email" value="" class="form-control form-control input-lg" placeholder="Email">
    </div>
</div>