CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
Sergiodiaz53
Sergiodiaz53

Reputation: 1288

Grid system inside bootstrap form: inline select and input

I'm setting a form in bootstrap and I have this part: 

<div class="form-row">
        <div class="col-xs-12 col-md-12 col-lg-12">
             <select class="form-control" id="valueToFilter">
                  <option>Fecha</option>
             </select>
        </div>
    </div>
    <div class="form-row">
        <div class="col-xs-2 col-md-2 col-lg-">
            <select class="form-control" id="filterOperator">
                <option> > </option>
                <option> < </option>
                <option> = </option>
            </select>
        </div>

        <div class="col">
            <label for="filterValue" class="sr-only">Filter value</label>
            <input type="text" class="form-control" id="filterValue">
        </div>
    </div>

So it looks right in desktop:

desktop

But it looks 'not-inlined' in mobile

mobile

I think I have plenty of space because the select is just an operator (>, < or =) so, there is any way I can force the inline for those two members? why is col-xs-2 not working at all?

Thanks in advance.

Upvotes: 0

Views: 351

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362700

There is no longer a -xs infix in Bootstrap 4.

   <div class="form-row">
        <div class="col-2 col-md-2">
            <select class="form-control" id="filterOperator">
                <option> &gt; </option>
                <option> &lt; </option>
                <option> = </option>
            </select>
        </div>

        <div class="col">
            <label for="filterValue" class="sr-only">Filter value</label>
            <input type="text" class="form-control" id="filterValue">
        </div>
    </div>

https://www.codeply.com/go/HqVYxsu8I7

Read the Bootstrap grid docs
Bootstrap columns stacking vertically on mobile device

Upvotes: 1

Related Questions