Bootstrap 3 - Division of columns

Question

Assume we have two rows:
1 Row with col-md-12
1 Row with 2 divs, each of col-md-6

In the first row, I have Label/Textbox in a form-horizontal way. An example is shown below.

My question is, does the div with class form-group give me a row of width 12 columns? How to align content when I have rows including columns of different width? For instance, I need to align the sub button to be aligned with the Textbox, not the Label.

I am realizing that when I use a div.form-group, then I get the chance to have new 12 columns, even though the div.form-group is inside a div.col-md-6. Is this correct?

<!-- Latest compiled and minified CSS -->
<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="row">
  <div class="col-xs-11 col-md-6">
    <div class="form-group">
      <label for="txtFirstName" class="control-label col-md-3 col-xs-3">First Name</label>
      <div class="col-md-7 col-xs-8">
        <input type="text" class="form-control" id="txtFirstName">
      </div>
    </div>
  </div>
  <div class="col-xs-11 col-md-6">
    <div class="form-group">
      <label for="txtLastName" class="control-label col-md-3 col-xs-3">Last Name</label>
      <div class="col-md-7 col-xs-8">
        <input type="text" class="form-control" id="txtLastName">
      </div>
    </div>
  </div>
  </div>
  <div class="row">
  <div class="col-xs-11 col-md-6">
    <div class="form-group">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</div>

Alpesh Prajapati Alpesh Prajapati · Accepted Answer · 2014-09-11T07:37:29

you will have to use class 'row' to make it into col-6 div.

<div class="col-xs-11 col-md-6">
    <div class="form-group">
        <div class="row">
           <div class="col-md-3 col-xs-3"> 
              <label for="txtFirstName" class="control-label">First Name</label>
           </div>
           <div class="col-md-7 col-xs-8">
             <input type="text" class="form-control" id="txtFirstName">
           </div>
        </div>
    </div>
</div>

Check http://getbootstrap.com/css/ , Nesting columns section

Bootstrap 3 - Division of columns

1 Answers