CODEWITHSUNDEEP
cssformstwitter-bootstrap
L. Grunn
L. Grunn

Reputation: 185

Align a select dropdown with a input field with bootstrap

I am trying to horizontal align my select dropdown with my input field with bootstrap. But it's not working so far. I used <fieldset class="inline-fields"> to do this. This is what i want:

enter image description here

Here you can find a plunker: https://plnkr.co/edit/PtW626uq9jkLCbBLR9Xc?p=preview

Upvotes: 1

Views: 3238

Answers (2)

ONE_FE
ONE_FE

Reputation: 996

<fieldset class="inline-fields">
    <label>search</label>
        <p>Find all:</p>
        <div class = "row col-sm-12">
            <div class = "row col-sm-6 col-md-6">
                <select class="form-control" id="column_select">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </div>
            <div class = "row col-sm-6 col-md-6">
                <label for="keten2"></label>
                <input type="text" class="form-control" id="keten2" placeholder="Voer de naam van" name="keten2"></input>
                <br/>
            </div>
        </div>
    </fieldset>

Add bootstrap classes as above. Worked for me.

Go through a bootstrap tutorial and understand the bootstrap grid system.

Upvotes: 1

Faizaan Nawaz
Faizaan Nawaz

Reputation: 86

Wrap both controls in a Div with class row

<div class="row"> </div>

Then try wrapping both of the controls individually in a:

<div class="col-xs-6"> </div>

A good resource to help with understanding bootstrap grids is W3Schools: http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Hope that helps.

Upvotes: 1

Related Questions