CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Clinton Green
Clinton Green

Reputation: 9977

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 two 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

Upvotes: 5

Views: 6559

Answers (2)

Steve
Steve

Reputation: 9603

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.

Upvotes: 8

Praveen Puglia
Praveen Puglia

Reputation: 5641

I am guessing you would need custom width for the forms. Also, you would need to use .form-inline.

From Bootstrap:

May require custom widths

Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.

Upvotes: 0

Related Questions