CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
jn025
jn025

Reputation: 2895

Bootstrap multiple inputs inline

I'm having difficulty placing two and one text input in a single row in my form. I am able to get the two selects inline but the text input is being stubborn. Here is how it looks with the current code:

enter image description here

<form role='form' action='#' method='post'>
    <div class='form-group'>
        <label for='query-bar' class='sr-only'></label>
        <input type='text' class='form-control' placeholder='Enter search query..' name='query-bar' />
    </div>
    <div class='form-inline'>
        <div class='form-group'>
            <select name='builder-columns' class='form-control'>
                <option selected disabled value='none'>Columns</option>
                <option></option>
            </select>
        </div>
        <div class='form-group'>
            <select name='builder-operators' class='form-control'>
                <option selected disabled value='none'>Operators</option>
            </select>
        </div>
        <div class='form-group'>
            <label for='builder-filter' class='sr-only'></label>
            <input type='text' placeholder='Filter' name='builder-filter' class='form-control' />
        </div>
    </div>
</form>

Upvotes: 1

Views: 6993

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240928

You could use the following:

<div class='form-inline row'>
    <div class='form-group col-sm-4'>
        <select name='builder-columns' class='form-control'>
            <option selected disabled value='none'>Columns</option>
        </select>
    </div>
    <div class='form-group col-sm-4'>
        <select name='builder-operators' class='form-control'>
            <option selected disabled value='none'>Operators</option>
        </select>
    </div>
    <div class='form-group col-sm-4'>
        <label for='builder-filter' class='sr-only'></label>
        <input type='text' placeholder='Filter' name='builder-filter' class='form-control' />
    </div>
</div>

.form-inline .form-control {
    width: 100%;
}

The class row was added to the form-inline elements, and the class col-sm-4 was added to the form-group elements. In addition, the width of the .form-control elements was set to 100% in order to overwrite width: auto which is applied at certain screen sizes.

Example Here

Upvotes: 1

Related Questions