How to set bootstrap form with multi controls aligned at same row (and responsive)

Question

I'd like to draw a table using bootstrap css and looks like this:

After reading many tutorials on internet, I didn't find any examples directly support multi controls aligned as the pictrue above (either using .form-horizontal or .form-inline).

Can anyone show me an example please ?

Answer 1

You can also use grid system without adding any customized styles:

    <form>
        <div class="row">
            <div class="col-md-1 col-sm-1 form-group">
                <label>Name</label>
            </div>
            <div class="col-md-5 col-sm-11 form-group">
                <input type="text" class="form-control" />
            </div>
            <div class="col-md-1 col-sm-1 form-group">
                <label>Age</label>
            </div>
            <div class="col-md-5 col-sm-11 form-group">
                <input type="text" class="form-control" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-1 col-sm-1 form-group">
                <label>Sex</label>
            </div>
            <div class="col-md-5 col-sm-11 form-group">
                <input type="text" class="form-control" />
            </div>
            <div class="col-md-1 col-sm-1 form-group">
                <label>Job</label>
            </div>
            <div class="col-md-5 col-sm-11 form-group">
                <input type="text" class="form-control" />
            </div>
        </div>
    </form>

Results:

large

---

small

---

Smallest

Answer 2

@ineztia: try this source code and let me know.

.form-row > .control-label {
  margin-top: 5px;
}
.form-row > .input-text {
  margin-bottom: 5px;
}
@media screen (min-width: 768px) {
  .form-row > .control-label {
    margin-top: 0;
  }
  .form-row > .input-text {
    margin-bottom: 0;
  }
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <form class="form-horizontal">
        <fieldset>
          <!-- Form Name -->
          <legend>Form Name</legend>
          <!-- Text input-->
          <div class="form-group">
            <div class="form-row">
              <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Name</label>
              <div class="col-lg-4 col-md-4 col-sm-4 col-xs-9 input-text">
                <input type="text" placeholder="Name..." class="form-control input-md">
              </div>
            </div>
            <div class="form-row">
              <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Age</label>
              <div class="col-lg-4 col-md-4 col-sm-4 col-xs-9 input-text">
                <input type="text" placeholder="Age..." class="form-control input-md">
              </div>
            </div>
          </div>
          <!--/form-group-->
          <!-- Text input-->
          <div class="form-group">
            <div class="form-row">
              <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Sex</label>
              <div class="col-lg-4 col-md-4 col-sm-4 col-xs-9 input-text">
                <input type="text" placeholder="Sex..." class="form-control input-md">
              </div>
            </div>
            <div class="form-row">
              <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Job</label>
              <div class="col-lg-4 col-md-4 col-sm-4 col-xs-9 input-text">
                <input type="text" placeholder="Job..." class="form-control input-md">
              </div>
            </div>
          </div>
          <!--/form-group-->
          <!-- Button (Double) -->
          <div class="form-group text-right">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
              <button name="btn-ok" class="btn btn-cancel btn-success">OK</button>
              <button name="btn-cancel" class="btn btn-cancel btn-danger">Cancel</button>
            </div>
          </div>
          <!--/form-group-->

        </fieldset>
        <!--/fieldset-->
      </form>
      <!--/form-->
    </div>
  </div>
</div>