Bootstrap 4 Inline Form: Center Text Input and Button on Single Line

May 31, 2019

I want to achieve the form layout where Text Input and Button are on a single line, centered horizontally.

Bootstrap Center Inline Form

Solution 1

<form class="form-inline justify-content-center">
  <div class="my-3">Join our early access program and be the first to experience the warmth of 暖心芽.</div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputEmail" class="sr-only">Your email</label>
    <input name="email" type="email" class="form-control" id="inputEmail" placeholder="Your email">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Request Invite</button>
</form>

NOTE: Use Bootstrap - Forms Tooltips for validation messages.

Solution 2

<form>
  <div class="form-row justify-content-md-center">
    <div class="my-3">Join our early access program and be the first to experience the warmth of 暖心芽.</div>
  </div>
  <div class="form-row justify-content-md-center">
    <div class="col-md-auto mb-3">
      <label for="inputEmail" class="sr-only">Your email</label>
      <input type="email" class="form-control" id="inputEmail" placeholder="Your email">
    </div>
    <div class="col-md-auto mb-3">
      <button type="submit" class="btn btn-primary" @click.prevent="saveSdk">Request Invite</button>
    </div>
  </div>
</form>

NOTE: This solution works better with Form Validation.

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.