Two input field next to each other bootstrap 3

Question

I'm new to bootstrap and have a problem placing two input fields next to each other. I've searched on the internet (and bootstrap.com), but couldn't find the anser.

Code: The code

Result. But I need the input fields and button next to each other in one row:

Result. But I need the input fields and button next to each other in one row

I tried using columns... didn't work

score 0 · Answer 1 · edited May 23 '17 at 11:45

0

You can follow : Display two fields side by side in a Bootstrap Form

<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>

edited May 23 '17 at 11:45

Community

1
1

answered Feb 10 '16 at 13:21

Punit kumar Tripathi

79
4

Thank you for your quick comment. I have used your example and found that the "input-group was wrong". I Have corrected it with: "form-incline". I found it on http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php – Luc Schnabel Feb 10 '16 at 13:47

score 0 · Answer 2 · edited Feb 11 '16 at 15:12

You can try below code

<div class="container content">
    <div class='row'>
        <form role="form" class="form-horizontal" method="post">
            <div class='col-xs-12 col-sm-4'>
                <div class="form-group">
                    <input class="form-control" name="" placeholder="Search from this date">
                </div>
            </div>
            <div class='col-xs-12 col-sm-4'>
                <div class="form-group">
                    <input class="form-control" name="" placeholder="Search till this date">
                </div>
            </div>
            <div class='col-xs-12'>
                <div class="form-group">
                    <button class="btn btn-primary">Search</button>
                </div>
            </div>
            <div class='col-xs-12'>
                <div class="form-group">
                    <a href="link">Back</a>
                </div>
            </div>
        </form>
    </div>
</div>

Two input field next to each other bootstrap 3

2 Answers2