CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Xubayer pantho
Xubayer pantho

Reputation: 329

How to place two selects side by side using Bootstrap?

I want to place two select options side by side in my form. I am using Bootstrap 3 but I can't place them with proper alignment.

Here is my HTML code:

    <form role="form">
        <div class="form-group">
            <div class="input-group date" id="datetimepicker1">
                <input type="text" class="form-control"/>
                <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <input type="text" class="form-control"/>
                <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
            </div>
        </div>
        <div class="form-group">
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </div>
        <div class="form-group">
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </div>
        <button type="submit" class="btn btn-primary btn-block te" >Prices &amp; Availability</button>
    </form>

Upvotes: 3

Views: 17984

Answers (2)

user2251695
user2251695

Reputation: 129

class form-control in bootstrap has the display value of block. give it the class d-inline-block

 <select class="form-control d-inline-block">

Upvotes: 0

Harsh
Harsh

Reputation: 1072

Use this

jsfiddle http://jsfiddle.net/harshdand/e0fc1ucq/

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </div>
    </div>
</div>

Upvotes: 5

Related Questions