Search code examples
formsbootstrap-4inline

Inline Form Input and Submit Button Misaligned at Screen Widths < 576 px

I'm using Bootstrap 4.2.1 and I have an inline form that displays perfectly at viewport widths > 575 px: Form elements nicely line up However, at viewport widths < 576 px, the form submit button becomes misaligned, dropping slightly: enter image description here I've replicated the problem here: https://www.codeply.com/go/hW1xZkJXQ9

<div class="container">
    <div class="row">
        <form class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="Email">Email address</label>
            <input type="email" class="form-control mr-2" id="Email" placeholder="user@gmail.com">
        </div>
        <button class="btn btn-primary" type="submit">Add</button>
        </form>
    </div>
</div>

Any ideas why this happens at smaller screen widths?

Solution

  • Here's what I ended up doing without having to customize the core Bootstrap CSS.

    I learned that .form-inline only displays form elements inline at screen widths of at least 576 px. Additionally, I was incorrectly using .form-group along with .form-inline when I should have been using .input-group on the inputs, as was pointed out above. But this still didn't allow me to keep things inline at narrow screen widths of less than 576 px.

    Therefore, I abandoned .form-inline altogether and instead used a form grid approach using Bootstrap's built-in grid classes. I used .form-row and treated the inline form elements as normal columns:

    Updated Codeply: https://www.codeply.com/go/hwBPwM6qTV

    <div class="container">
<form>
    <div class="form-row">
        <div class="col-8 col-sm-5 col-md-4">
            <div class="form-group">
                <label class="sr-only" for="Email">Email address</label>
                <input type="email" class="form-control" id="Email" name="Email"  placeholder="user@gmail.com">
            </div>
        </div>
        <div class="col">
            <button class="btn btn-primary" type="submit">Add</button>
        </div>        
    </div> <!-- .form-row -->
</form>
</div>

    This keeps everything inline at very narrow screen widths: inline form at narrow screen widths

    Obviously, the columns can be changed to suit the needs of the particular application or preference.