Clinton Green Clinton Green - 6 months ago 12
CSS Question

Bootstrap 3: How to use .col classes on .form-control classes

I have a form which uses

.form-control
classes on the form elements. I want to display to inputs side by side so I'm using
.col-md-6
on each of these inputs but because they already have .form-control classes the width generated by
.col-md-6
is being overwritten by the
.form-control
class.

How do I ensure it uses the
.col-md-6
width of 50% and not the
.form-control
width of 100%?

HTML

<form id="user-edit-account" data-toggle="validator" class="form-horizontal">
<h4>Account Settings</h4>
<div class="form-group">
<label for="user-profile-name" class="control-label col-sm-4">Location*</label>
<div class="col-sm-8">
<select id="profile-country" class="form-control col-md-6" name="country">
<option value="">Please select a destination</option>
<option value="India">India</option>
<option value="China">China</option>
<option value="Asia">Asia</option>
</select>
<input type="text" class="form-control col-md-6" id="profile-region" placeholder="City" value="">
</div>
</div>
</form

Answer

You need to include another .row div inside your col-sm-8 column and surround each form control with a column div. Since .form-control specifies a width of 100%, they will expand to the width of their parent container. Having the columns around the form controls allows this to happen.

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

<div class="container">
  <form id="user-edit-account" data-toggle="validator" class="form-horizontal">
    <h4>Account Settings</h4>
    <div class="form-group">
      <label for="user-profile-name" class="control-label col-sm-4">Location*</label>
      <div class="col-sm-8">
        <div class="row">
          <div class="col-xs-6">
            <select id="profile-country" class="form-control" name="country">
              <option value="">Please select a destination</option>
              <option value="India">India</option>
              <option value="China">China</option>
              <option value="Asia">Asia</option>
            </select>
          </div>
          <div class="col-xs-6">
            <input type="text" class="form-control" id="profile-region" placeholder="City" value="">
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

See the Bootstrap Docs for more examples.