Bootstrap 4 Form Examples

Login, Contact, Payment, Register Forms for Bootstrap 4

With the recent release of Bootstrap 4.0, I wanted to share some form snippets that you can grab, and easily mix into your Bootstrap 4 projects. All of these examples, are responsive and designed to work with Bootstrap 4 “out-of-the-box” so no extra CSS or JS is needed.

Login Form

First up is a simple Bootstrap 4 login form with username, password, and “remember me” custom form checkbox. The new radius (rounding) utils have been utilized to square-off the card and inputs, and make our login form look less Bootstrap-ish.

Bootstrap 4 Login Form Snippet

Contact Form

This example Bootstrap 4 contact form has inputs for name, email, contact purpose and a textarea field for notes or comments.

Bootstrap 4 Contact Form

User Profile Form

Here’s a basic Bootstrap 4 profile form to edit user information such as name, email, title, time zone, password and other inputs.

Bootstrap 4 User Profile Form Snippet

Sign-up Form

Her’s a simple Bootstrap 4 registration form with email, password, “agree to terms” checkbox and security questions. It also includes an “alert” that works as an example of how validation events can be tied to the form.

Bootstrap 4 Registration Form Snippet

Get the code snippet

Credit Card Payment Form

This Bootstrap 4 payment form example includes images for the major U.S. credit cards (Visa, MC, American Express and Discover). It’s vertically oriented, and the CVC (CVV) 3-digit code input has a help icon with popover to show guidance for locating the code on the back of the card.

Bootstrap 4 Credit Card Form Snippet

So there’s my collection of Bootstrap 4 form examples. Explore the full collection and source code. Also check out more helpful Bootstrap 4 examples on Codeply, and keep learning How to… Bootstrap.