Page Layouts
Common page layout patterns for structuring content.
Main Column + Right Sidebar
Two-column layout with primary content and supplementary sidebar. Sidebar stacks below on mobile.
Main Content
The main content area uses col-lg-8 for primary information. This column contains the core content users are looking for.
On mobile devices, this column takes full width and appears first.
<main class="container-md">
<div class="row g-4">
<div class="col-lg-8">
<!-- Main content -->
</div>
<div class="col-lg-4">
<!-- Sidebar -->
</div>
</div>
</main>Single Column Layout
Simple centered layout for focused content. Best for articles, documentation, and forms.
Example Content
This is a single column layout using container-md with a col-lg-10 mx-auto column. It provides a comfortable reading width and centers the content.
Perfect for documentation pages, blog posts, and long-form content where focus and readability are priorities.
<main class="container-md">
<div class="row">
<div class="col-lg-10 mx-auto">
<!-- Content here -->
</div>
</div>
</main>Full Width Sections with Centered Content
Full-width sections with different backgrounds, but content constrained to standard container width. Perfect for landing pages with visual variety.
Section with White Background
Each section spans full width but content is contained within container-md and col-lg-10 mx-auto.
Section with Gray Background
Different sections can have unique backgrounds while maintaining consistent content width and alignment.
Section with Brand Background
Create visual interest with full-width colored sections while keeping content readable and aligned.
<!-- Section 1 -->
<section class="py-5" style="background-color: #ffffff;">
<div class="container-md">
<div class="row">
<div class="col-lg-10 mx-auto">
<!-- Content -->
</div>
</div>
</div>
</section>
<!-- Section 2 -->
<section class="py-5 bg-light">
<div class="container-md">
<div class="row">
<div class="col-lg-10 mx-auto">
<!-- Content -->
</div>
</div>
</div>
</section