html - Bootstrap column does not go to the next line on small screen -

i'm trying make form field 4 buttons in same row. i'm using bootstrap , since wanted field , buttons vertically aligned, made css class vcenter it.

jsfiddle code

html

<form>                 <div class="row stopwrap">                     <div class="form-group col-lg-8 col-md-8 col-sm-8 col-xs-12 vcenter">                         <label for="inputfirstname">first name</label>                         <input type="email" class="form-control" id="inputfirstname" placeholder="first name">                     </div>                     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center vcenter">                         <button type="button" class="btn btn-warning" aria-label="left align">                             <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>                         </button>                          <button type="button" class="btn btn-primary" aria-label="left align">                             <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>                         </button>                          <button type="button" class="btn btn-danger" aria-label="left align">                             <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>                         </button>                          <button type="button" class="btn btn-success" aria-label="left align">                             <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>                         </button>                     </div>                 </div>                 </form> 

css

.stopwrap{  white-space: nowrap; } .vcenter {  display: inline-block;  vertical-align: middle;  float: none; } 

the problem due float:none overrides bootstrap float:left. that's why not go next line.

in case, should not use vcenter. remove , add vertically align buttons:

<div>    &nbsp; </div> 

http://jsfiddle.net/5sceeno8/

it looks hack, it's not because set <input type="email" /> width 100%, want display label , input on separate lines. similar this:

<div>     <label for="inputfirstname">first name</label> </div> <div>     <input type="email" class="form-control" id="inputfirstname" placeholder="first name"> </div> 

after using  , our button block has similar structure input:

<div>    &nbsp; //this replacement <label> above has same height. </div> <div>    //our buttons here </div>