Form Layout

Give your forms some structure—from inline to horizontal to custom grid implementations.

Forms

With Astral.CSS, designing structured, user-friendly forms is simple. Whether you're building a basic form, a complex grid layout, or an inline form, our framework makes it easy to create forms that are both functional and stylish.

Basic Form Structure

Every group of form fields should be wrapped in a <form> element. While Astral.CSS doesn't apply default styling to the <form> itself, the framework leverages powerful browser features to enhance your forms.

Pro Tip: Buttons inside a <form> default to type="submit", so always be specific and set the type for clarity. Additionally, you can disable every form element by applying the disabled attribute on the <form> element.

Build Complex Forms with the Form Grid

For more complex layouts with multiple columns or varied widths, you can use Astral.CSS’s grid system. This allows you to create sophisticated form layouts with ease.

For even more intricate layouts, use the following structure:

Horizontal Forms Made Easy

Creating horizontal forms is a breeze with the grid system. Just add the columns class and use the .col-* classes to adjust the widths of labels and form inputs.

Column Spacing

Astral.CSS's grid system allows you to control the width of columns with ease. You can specify different column classes like col-7, .col-md-7, or .col-lg-8to make some columns take up more space than others.

Form inline

Need to create a simple inline form? Astral.CSS makes this easy with the form-inline class—no need for flex utilities.
With Astral.CSS, creating beautifully structured forms has never been easier. From basic forms to complex grid layouts and inline forms, our grid system and utility classes give you the flexibility to design forms that fit your needs—without sacrificing style.