Search code examples
twitter-bootstrapformfield

Input fileds in oneline


Could someone help me to have two input fields and a submit button on the same line? I have created sample in jsfiddle. Thank you.

http://jsfiddle.net/Mndgw/

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

Solution

  • http://jsfiddle.net/Mndgw/1/ In general: in order to place several divs in one line, they should all have a container which has display: inline-block, and a numeric width(px\percent) width, and each one of them should have the css property display:inline-block, along with numeric width(px\precent) HI I have updated your code, please view the 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 -->