Search code examples
htmlcsstwitter-bootstrapbootstrap-4

Vertical align not working for custom control

I'm trying to build a simple filter-bar which has a custom-control element.

The element should be aligned vertically but it seems not to be working. This is the markup for the filter-bar:

<div class="bg-light p-3 card">
    <form class="form-inline">
        <div class="form-row">
            <div class="col-auto">
                <input type="text" placeholder="The team's name" class="form-control" value="" />
            </div>
            <div class="col-auto">
                <select class="form-control">
                    <option value="">Select the season</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-secondary">
                    <i class="fas fa-search"/>&nbsp;Search</button>
            </div>
            <div class="col-auto">
                <div class="custom-control custom-switch align-center">
                    <input type="checkbox" class="custom-control-input" id="vpx" checked="" />
                    <label class="custom-control-label" for="vpx">Hide 0-point teams</label>
                </div>
            </div>
        </div>
    </form>
</div>

But the result is shown below:

Filter-bar

No matter which align- class I add, the element won't move a bit. Already tried to set the display property to inline-block as stated in the bootstap-docs. Only way to achieve something like centered is to add mt-2 class but this seems not to be the correct way this should be done.

Solution

  • Add align-items-center to form-row and also close the <i> tag correctly on Search button

    body{ min-width: 800px;}
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-light p-3 card">
    <form class="form-inline">
        <div class="form-row align-items-center">
            <div class="col-auto">
                <input type="text" placeholder="The team's name" class="form-control" value="" />
            </div>
            <div class="col-auto">
                <select class="form-control">
                    <option value="">Select the season</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-secondary">
                    <i class="fas fa-search">&nbsp;Search</i></button>
            </div>
            <div class="col-auto">
                <div class="custom-control custom-switch align-center">
                    <input type="checkbox" class="custom-control-input" id="vpx" checked="" />
                    <label class="custom-control-label" for="vpx">Hide 0-point teams</label>
                </div>
            </div>
        </div>
    </form>
</div>