Search⌘ K

Signup Form

Explore how to build a responsive signup form using Bootstrap 4 by applying form-control classes, grid columns, and flexbox alignment. Understand the structure and styling needed to replicate Shopify's signup section, including typographic elements and button configuration.

Adding the signup form

Forms are a big topic in Bootstrap 4. There are many ways to work with forms in Bootstrap 4. It’s the same in regular HTML when no framework is used.

For example, there are 22 different values we can add to the type attribute on an input element in HTML.

These 22 values are just for the HTML element. There are many other elements that we could use in HTML forms. In fact, HTML forms could have an entire series of articles of their own.

Inspecting the signup form on the Shopify homepage

This is what it looks like.

Looking at the form structure above, we see some areas marked in numbers:

  • There’s a wrapping <from> element with a custom form—-inline CSS class. ...