BS5 Stacked/Horizontal Forms
Create vertical and horizontal form layouts
📋 What are Form Layouts?
Bootstrap offers two main form layouts: stacked (vertical) where labels appear above inputs, and horizontal where labels and inputs align side-by-side. Choose the layout that best fits your design and available space for optimal user experience.
<!-- Stacked Form -->
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control">
</div>
Stacked Forms (Vertical)
The default and most accessible form layout places labels above their corresponding input fields, creating a clear, vertical flow that is easy to scan and complete. Use the .mb-3 utility class to add consistent bottom margin between form groups, ensuring ample spacing and visual separation. Stacked forms work exceptionally well on all screen sizes, particularly mobile devices, as they avoid horizontal crowding and align with natural touchscreen interaction patterns. This layout improves form completion rates, enhances user experience, and supports SEO by creating accessible, semantic form structures that search engines can better understand and index, especially when combined with proper <label> associations and ARIA attributes.
🔸 Basic Stacked Form
<form>
<div class="mb-3">
<label for="name" class="form-label">Full Name</label>
<input type="text" class="form-control" id="name" placeholder="John Doe">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email Address</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="remember">
<label class="form-check-label" for="remember">Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>Output:
🔹 Horizontal Forms
Optimize for larger screens by placing labels and inputs side-by-side using Bootstrap’s grid system within each form group wrapped in a .row. Typically, labels use a column class like .col-sm-3 while inputs use .col-sm-9, creating a compact, space-efficient layout that conserves vertical space. This approach is ideal for data-intensive applications, admin panels, or desktop-oriented interfaces where screen real estate is maximized. Implementing horizontal forms with semantic markup and proper fieldset/legend structures enhances accessibility. While primarily for larger screens, ensuring a responsive fallback to stacked layout on mobile maintains usability and supports SEO through improved engagement and lower bounce rates.
🔸 Basic Horizontal Form
<form>
<div class="row mb-3">
<label for="hName" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="hName">
</div>
</div>
<div class="row mb-3">
<label for="hEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="hEmail">
</div>
</div>
<div class="row mb-3">
<label for="hPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="hPassword">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>Output:
🔹 Horizontal Form with Sizing
Maintain visual harmony and alignment by matching label sizes with their corresponding input sizes using .col-form-label-sm or .col-form-label-lg classes. These utility classes adjust the label’s font size, padding, and line-height to align perfectly with small or large form controls created with .form-control-sm or .form-control-lg. Consistent sizing creates a polished, professional appearance, improves form readability, and enhances the overall user experience. Accessible, well-labeled forms are easier for both users and assistive technologies to navigate, which indirectly benefits SEO by increasing user satisfaction, form submissions, and positive engagement signals that search engines consider in their ranking algorithms.
<!-- Small horizontal form -->
<div class="row mb-3">
<label for="smallInput" class="col-sm-2 col-form-label col-form-label-sm">Small</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-sm" id="smallInput">
</div>
</div>
<!-- Large horizontal form -->
<div class="row mb-3">
<label for="largeInput" class="col-sm-2 col-form-label col-form-label-lg">Large</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-lg" id="largeInput">
</div>
</div>Output:
🔹 Inline Forms
Create compact, single-line form layouts ideal for search bars, filters, or newsletter signups where horizontal space is prioritized. Use the .row container with the .g-3 gutter utility for consistent spacing and .col-auto for columns that shrink-wrap to their content. This flexbox-based approach ensures all form elements (labels, inputs, buttons) appear on one line. Inline forms should be used judiciously, as they can present accessibility challenges on small screens. When implemented with responsive considerations (like collapsing on mobile) and proper semantic HTML, they can enhance user experience for specific tasks, potentially improving site interaction metrics that positively influence SEO.
<form>
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inlineEmail" class="col-form-label">Email</label>
</div>
<div class="col-auto">
<input type="email" class="form-control" id="inlineEmail">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>Output:
🔹 Responsive Form Layout
Deliver the optimal user experience across all devices by combining stacked (mobile) and horizontal (desktop) form layouts using responsive breakpoint classes. Structure your form groups within .row elements and use a combination like .col-12 .col-md-3 for labels and .col-12 .col-md-9 for inputs. This makes forms stack vertically on small screens for ease of use and switch to a horizontal, space-efficient layout on medium screens and above. This adaptive strategy significantly improves form usability and completion rates. Accessible, user-friendly forms contribute to longer session durations and higher engagement—key behavioral signals that search engines evaluate for ranking purposes.
<form>
<div class="row mb-3">
<label for="responsiveName" class="col-12 col-md-2 col-form-label">Name</label>
<div class="col-12 col-md-10">
<input type="text" class="form-control" id="responsiveName">
</div>
</div>
<div class="row mb-3">
<label for="responsiveEmail" class="col-12 col-md-2 col-form-label">Email</label>
<div class="col-12 col-md-10">
<input type="email" class="form-control" id="responsiveEmail">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>Output:
🔹 Form Grid
Organize related form fields into a structured, multi-column layout using the grid system within a single form row. This is perfect for grouping address components (street, city, state, ZIP) or contact information (phone, email) side-by-side, making forms appear shorter and less daunting. Use column classes like .col-md-4 for each field group. A well-designed form grid improves the visual flow, accelerates data entry, and enhances the overall user experience. From an SEO perspective, clean, fast-loading form code with proper input names and IDs contributes to a better technical site structure, while improved user interaction with forms can lead to more conversions and positive engagement signals.
<form>
<div class="row mb-3">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
<div class="row mb-3">
<div class="col-8">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col-4">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>