i have form uses .form-control classes on form elements. want display 2 inputs side side i'm using .col-md-6 on each of these inputs because have .form-control classes width generated .col-md-6 being overwritten .form-control class.
how ensure uses .col-md-6 width of 50% , not .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 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
you need include .row div inside col-sm-8 column , surround each form control column div. since .form-control specifies width of 100%, expand width of parent container. having columns around form controls allows 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 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 bootstrap docs more examples.
