Two columns on same row with bootstrap 3.2

Question

I'm trying to place two columns on the same row with Bootstrap 3.2, but am not having any success.

The format that I want is something like this: BeginDate: txbox1 EndDate: txtbox2

My code is as follows, but I know it's incorrect.

I would appreciate it very much for someone more experienced in Bootstrap for a solution.

<label for="dteBeginDate" class="col-md-2 control-label">Begin Date:</label>
                <div class="col-md-10">
                    <input type="date" id="dteBeginDate">
                </div>
                <label for="dteEndDate" class="col-md-2 control-label">End Date:</label>
                <div class="col-md-10">
                    <input type="date" id="dteEndDate">
                </div>

Answer 1

Bootstrap 3 has a 12 unit width column grid, so this means that each row can have up to 12 columns, and additional columns will be stacked below as another rows. You are setting 24 units (col-md-2 + col-md-10 + col-md-2 + col-md-10), so the second pair of columns are moving to another row (remember that the number post-fix in the class names indicates the column length). Reduce the units to 12, placing them within a "row" class div for completeness (it doesn't constraint that all the elements will be within a single row, though). For example:

<div class="row">
  <label for="dteBeginDate" class="col-md-2 control-label">Begin Date:</label>
  <div class="col-md-4">
    <input type="date" id="dteBeginDate">
  </div>
  <label for="dteEndDate" class="col-md-2 control-label">End Date:</label>
  <div class="col-md-4">
    <input type="date" id="dteEndDate">
  </div>
</div>

Answer 2

I will make two changes to help you out. The first being to place the label inside the div otherwise you are actually making 4 columns (label, input, label, input). The second being that bootstraps gridsystem is broken into 12 columns per 1 row and your original code used 24 columns (2 label, 10 input, 2 label, 10 input). Check out the bootply here

Code

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <label>Begin Date:</label>
            <input type="date" id="dteBeginDate">
        </div>
        <div class="col-md-6">
            <label>End Date:</label>
            <input type="date" id="dteEndDate">
        </div>
    </div>
</div>

Answer 3

Demo: http://jsbin.com/yukut/1/edit

I think what you are looking for is the form-inline. Look at the docs: http://getbootstrap.com/css/#forms

   <form class="form-inline" role="form">
      <div class="form-group">
        <label for="begin_date">Begin Date:</label>
        <input type="date" class="form-control" id="begin_date" placeholder="Start Date">
      </div>
      <div class="form-group">
        <label for="end_date">End Date:</label>
        <input type="date" class="form-control" id="end_date" placeholder="End Date">
      </div>
    </form>