align 4 fields inline with bootstrap

Question

I am trying to make a form that have some horizontal and inline fields, found the best way instead fighting with the form classes just try to do it like another regular template, I am able to place the label and fields next to each other but they are not taking all the possible space, and touch eachother, I would like to be able to use all the space of the row,

this is what I have: thanks guys

this is the gap I want to remove, I kinda cheeted and played with the div margins but I don't think that's the proper way to do it =(

<div class="col-lg-4" style="background-color:green">
<form>
    <div class="form-group">
        <div class="row">
            <label for="name" class="control-label">Name</label>
        </div>
        <div class="row">
            <input type="text" class="form-control" name="name" placeholder="name"/>
        </div>
    </div>

    <br>
    i want the birthday portion to be all one line all next to each other.
    using all the space like the Name field above, should i use some kind of <span>?

    <div class="form-group">
        <div class="row">
            <div class="col-lg-3">
                <label for="birthday" class="control-label">Birthday:</label>
            </div>
            <div class="col-lg-3">
                <input type="text" class="form-control" placeholder="year"/>
            </div>
            <div class="col-lg-3">
                <input type="text" class="form-control" placeholder="month"/>
            </div>
            <div class="col-lg-3">
                <input type="text" class="form-control" placeholder="day"/>
            </div>
        </div>

    </div>
</form>

Answer 1

You might want to use .col-xs-3 to have 4 equal columns on all screen sizes. Using .col-lg-3 will only create the columns on large screens (≥1200px). Otherwise, it will collapse to show one on top of the other. Also, to remove the gaps in between the the three inputs, you will have to remove the padding on the .col-* classes.

div.col-xs-3 {
  padding-left:0;
  padding-right:0;
}/*Just as an example. You might not want to this for ALL .col-xs-3 classes. You can modify this just for the input divs*/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-lg-4" style="background-color:green">
<form>
    <div class="form-group">
        <div class="row">
            <label for="name" class="control-label">Name</label>
        </div>
        <div class="row">
            <input type="text" class="form-control" name="name" placeholder="name"/>
        </div>
    </div>



    <div class="form-group">
        <div class="row">
            <div class="col-xs-3">
                <label for="birthday" class="control-label">Birthday:</label>
            </div>
            <div class="col-xs-3">
                <input type="text" class="form-control" placeholder="year"/>
            </div>
            <div class="col-xs-3">
                <input type="text" class="form-control" placeholder="month"/>
            </div>
            <div class="col-xs-3">
                <input type="text" class="form-control" placeholder="day"/>
            </div>
        </div>

    </div>
</form>
</div>

Answer 2

In the following code I changed a few things to achieve the situation you want. I removed some rows because you simply did not need all of those. Bootstrap rows adjust your grid, causing a difference in the width of your form fields.

I ended up writing the following code for you:

<div class="col-lg-4" style="background-color:green">
  <form>
    <div class="form-group">
      <label for="name" class="control-label">Name</label>
      <input type="text" class="form-control" name="name" placeholder="name"/>
    </div>

    <div class="form-group">
      <div class="row">
        <div class="col-lg-3">
          <label for="birthday" class="control-label">Birthday:</label>
        </div>
        <div class="col-lg-3">
          <input type="text" class="form-control" placeholder="year"/>
        </div>
        <div class="col-lg-3">
          <input type="text" class="form-control" placeholder="month"/>
        </div>
        <div class="col-lg-3">
          <input type="text" class="form-control" placeholder="day"/>
        </div>
      </div>
   </form>
</div>

If you also want 'Birthday' above the inline fields you can change the classes to these:

<div class="form-group">
  <div class="row">
    <div class="col-lg-12">
      <label for="birthday" class="control-label">Birthday:</label>
    </div>
    <div class="col-lg-4">
      <input type="text" class="form-control" placeholder="year"/>
    </div>
    <div class="col-lg-4">
      <input type="text" class="form-control" placeholder="month"/>
    </div>
    <div class="col-lg-4">
      <input type="text" class="form-control" placeholder="day"/>
    </div>
  </div>