Design > Layout

Here you can learn about the designing and styling your form layout (e.g. responsive grid, cards and colour schemes) and individual fields (e.g. floating labels, icons and input groups).

Responsive Layout Basics

Learn how to build a simple, responsive contact form with this practical Formstrap example. This tutorial walks you through creating a clean Contact Details form, perfect for modern web applications.

17th March 2025 1:14pm

Building Components

This article shows how to clone formstrap components and how to delete them. Cloning allows you to build forms that have similar sections very quickly.

20th March 2025 10:20am

Headings and Descriptions

This post explains how formstrap uses appropriate heading levels. It is important for accessibility and readability that forms are properly structured.

16th November 2024 8:01pm

Bootstrap Cards

This article shows how to enclose form components in Bootstrap semantic, colour-coded cards. Cards add a border and a styled heading.

5th February 2025 8:57am

Component Spacing

This blog post provides an overview of how you can apply spacing to your form. Spacing types include margins, padding and gutters.

22nd February 2025 12:06am

Pagination and Navigation

This article demonstrates how to organise your form over multiple pages. Once you have more than one page, a configurable page navigation will be available.

18th March 2025 11:08am