twitter bootstrap - Input fileds in oneline -
could me have 2 input fields , submit button on same line? have created sample in jsfiddle. thank you.
<div class="row"> <div class="col-lg-4 col-lg-offset-4"> <div class="form-group"> <input name="test1" type="text" class="form-control" id="test1" > <input name="test2" type="text" class="form-control" id="test2" > <button name="testsubmit" type="submit" class="btn btn-primary" >submit</button> </div> </div> <!-- col-lg-4 col close --> </div> <!-- row close -->
http://jsfiddle.net/mndgw/1/ in general: in order place several divs in 1 line, should have container has display: inline-block, , numeric width(px\percent) width, , each 1 of them should have css property display:inline-block, along numeric width(px\precent) hi have updated code, please view fiddle
@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'); .myfield{ width:39%; display:inline-block; } .mysubmit{ width:19%; display: inline block; } .mycontainer{ width: 70%; margin: auto; text-align: center; } -
<div class="row"> <div class="col-lg-4 col-lg-offset-4"> <div class="form-group mycontainer"> <input name="test1" type="text" class="form-control myfield" id="test1" > <input name="test2" type="text" class="form-control myfield" id="test2" > <button name="testsubmit" type="submit" class="btn btn-primary mysubmit" >submit</button> </div> </div> <!-- col-lg-4 col close --> </div> <!-- row close -->
Comments
Post a Comment