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

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.

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.