CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Sean Lindo
Sean Lindo

Reputation: 1437

How do you align inputs (with labels) with a button on the same line?

Just trying to make an easy-to-use search form by having all elements inline. It looks like the label pushes the inputs down by about 14px or so, but there's nothing to do the same for the search button. Any ideas on how I can get everything on the same line?

Screenshot

<div class="row">
    <div class="col-md-2">
        <label>Date: </label>
        <input type="date" name="startdate" class="form-control"/>
    </div>
    <div class="col-md-2">
        <label>Optional Search String: </label>
        <input type="text" class="form-control"/>
    </div>
    <div class="col-md-2">
        <button type="button" class="btn btn-primary">Search</button>
    </div>
</div>

Upvotes: 1

Views: 3528

Answers (4)

Sachin
Sachin

Reputation: 40970

You don't need to put any tricks bootstrap already has a class for such scenario which is form-inline. You can use it in your requirement. I have modified your classes according to that.

<div class="form-inline">
    <div class="form-group">
        <label>Date: </label>
        <input type="date" name="startdate" class="form-control"/>
    </div>
    <div class="form-group">
        <label>Optional Search String: </label>
        <input type="text" class="form-control"/>
    </div>
  <div class="form-group" style="vertical-align:bottom">
        <button type="button" class="btn btn-primary">Search</button>
  </div>
</div>

I have just use the vertical-align:bottom with last form-group because you have only one element in the last group instead of having two in rest of them.

Demo

Upvotes: 3

java seeker
java seeker

Reputation: 1266

             <div class="row">
                    <div class="col-md-2">
                        <label>Date: </label>
                        <input type="date" name="startdate" class="form-control"/>
                    </div>
                    <div class="col-md-2">
                        <label>Optional Search String: </label>
                        <input type="text" class="form-control"/>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary" style="margin-top: 28px">
                            Search
                        </button>
                    </div>
                </div>

Upvotes: 0

Felix
Felix

Reputation: 38102

One trick is to add a hidden label before your button:

<label class="hiddenLabel">This is hidden label</label>
<button type="button" class="btn btn-primary">Search</button>

then you can apply visibility: hidden; to this hidden label.

Bootply Demo

Upvotes: 1

helion3
helion3

Reputation: 37341

I don't believe there's any bootstrap class that specific, but it's easy to do yourself, using a margin-top: 14px on the button

Upvotes: 0

Related Questions