Bootstrap search button is not in line with input field

Question

ı am trying to make a change search section on ready template of ansonika

As a result I am getting this image that you can see searchnow is not in the same line.

Here you can see the code I have that for that section.

<section id="search_container">
<div id="search">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tours" data-toggle="tab">Tours</a></li>

                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="tours">
                    <h3>Search Tours in Paris</h3>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Destination</label>
                                    <input type="text" class="form-control" id="firstname_booking" name="firstname_booking" placeholder="Type your search terms">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                     <label><i class="icon-calendar-7"></i> Date</label>
                                    <input class="date-pick form-control" data-date-format="M d, D" type="text">

                                </div>

                            </div>

                            <button class="btn_1 green" type="submit"><i class="icon-search"></i>Search now</button>


                        </div><!-- End row -->



                    </div><!-- End rab -->


                </div>
</div>

How can I put this search box in the same row.

Thanks.

Answer 1

[update]

In your label css, i saw that it add another 5 px of bottom margin to the <label> so for hack solution, i add an br with another 5 px bottom margin to get the result.

    <div class="col-md-5">
        <div style="margin-bottom: 5px;">
            <br>
        </div>
        <button class="btn_1 green" type="submit"><i class="icon-search"></i>Search now</button>
    </div>

Answer 2

The problem is simple:
You have provided labels and inputs in the rest and only a input in this one, so the input occupies the label's place.
There is no neat solution other than to widen the entire div and have the entire row inline.
The alternative is to create a label or a cssed empty div that pushes the button down.
Or you could add inline styling for the button using the 'top' and 'position' properties.
I also recommend using a column for this.It is lot cleaner that way.