Bootstrap 3.0 inline forms with validation -

Bootstrap 3.0 inline forms with validation -

i've tried create inline forms work seemed width of inputs doesn't stretch 100% of col-md-x. not that, glyphicon doesn't work because width doesn't stretch 100%.

here code:

<div class="form-inline" role="form"> <div class="col-md-2 form-group"> <label class="sr-only"></label> <select class="form-control" id="add-assessment_questiontype"> <option value="slider">slider</option> <option value="radio">radio button</option> </select> </div> <div class="col-md-5 form-group"> <label class="sr-only"></label> <textarea class="form-control add-assessment_newquestion" rows="3" id="add-assessment_question" placeholder="enter question"></textarea> </div> <div id="add-assessment_title_color" class="col-md-5 form-group has-feedback"> <label class="sr-only"></label> <input type='text' class="form-control add-assessment_newquestion" id="add-assessment_optionmaxvalue" placeholder="enter max value"></input> <span id="add-assessment_optionmaxvalue_icon" class="glyphicon glyphicon-remove form-control-feedback"></span> </div>

here fiddle (view @ max width see "bug"): http://jsfiddle.net/dtchh/

bootstrap's .form-inline isn't intended used columns within it. according documentation:

to utilize inline form, you'll have set width on form controls used within.

alternatively utilize standard form , set form controls row. see code below , illustration bootply: http://www.bootply.com/mpwi0sufy5

<div class="container"> <form> <div class="row"> <div class="col-md-2"> <div class="form-group"> <label class="sr-only"></label> <select class="form-control" id="add-assessment_questiontype"> <option value="slider">slider</option> <option value="radio">radio button</option> </select> </div> </div> <div class="col-md-5"> <div class="form-group"> <label class="sr-only"></label> <textarea class="form-control add-assessment_newquestion" rows="3" id="add-assessment_question" placeholder="enter question"></textarea> </div> </div> <div class="col-md-5"> <div id="add-assessment_title_color" class="form-group has-feedback"> <label class="sr-only"></label> <input type="text" class="form-control add-assessment_newquestion" id="add-assessment_optionmaxvalue" placeholder="enter max value"> <span id="add-assessment_optionmaxvalue_icon" class="glyphicon glyphicon-remove form-control-feedback"></span> </div> </div> </div> </form> </div>

twitter-bootstrap twitter-bootstrap-3