Bootstrap 5 Framework

Grid Alignment and Ordering

13 min Lesson 5 of 40

Grid Alignment and Ordering

Bootstrap's grid system provides powerful alignment and ordering capabilities that give you precise control over how content is positioned and displayed. Let's explore these advanced features.

1. Vertical Alignment

Control vertical alignment of columns within rows using flexbox alignment classes:

<!-- Align all columns in a row -->
<div class="row align-items-start" style="height: 200px;">
    <div class="col">Aligned to top</div>
    <div class="col">Aligned to top</div>
</div>

<div class="row align-items-center" style="height: 200px;">
    <div class="col">Centered vertically</div>
    <div class="col">Centered vertically</div>
</div>

<div class="row align-items-end" style="height: 200px;">
    <div class="col">Aligned to bottom</div>
    <div class="col">Aligned to bottom</div>
</div>

<!-- Align individual columns -->
<div class="row" style="height: 200px;">
    <div class="col align-self-start">Top</div>
    <div class="col align-self-center">Center</div>
    <div class="col align-self-end">Bottom</div>
</div>
        

Alignment Classes:

align-items-start - Align all columns to top
align-items-center - Center all columns vertically
align-items-end - Align all columns to bottom
align-self-* - Align individual columns

2. Horizontal Alignment

Control horizontal positioning of columns using justify-content classes:

<!-- Start alignment (default) -->
<div class="row justify-content-start">
    <div class="col-4">Column 1</div>
    <div class="col-4">Column 2</div>
</div>

<!-- Center alignment -->
<div class="row justify-content-center">
    <div class="col-4">Column 1</div>
    <div class="col-4">Column 2</div>
</div>

<!-- End alignment -->
<div class="row justify-content-end">
    <div class="col-4">Column 1</div>
    <div class="col-4">Column 2</div>
</div>

<!-- Space around columns -->
<div class="row justify-content-around">
    <div class="col-4">Column 1</div>
    <div class="col-4">Column 2</div>
</div>

<!-- Space between columns -->
<div class="row justify-content-between">
    <div class="col-4">Column 1</div>
    <div class="col-4">Column 2</div>
</div>

<!-- Evenly distributed space -->
<div class="row justify-content-evenly">
    <div class="col-4">Column 1</div>
    <div class="col-4">Column 2</div>
</div>
        

Tip: Combine vertical and horizontal alignment for perfect centering: <div class="row align-items-center justify-content-center" style="height: 100vh;">

3. Column Ordering

Change the visual order of columns without changing HTML structure using order-* classes:

<!-- Default order -->
<div class="row">
    <div class="col">First in DOM</div>
    <div class="col">Second in DOM</div>
    <div class="col">Third in DOM</div>
</div>

<!-- Custom order -->
<div class="row">
    <div class="col order-3">First in DOM, but appears last</div>
    <div class="col order-1">Second in DOM, but appears first</div>
    <div class="col order-2">Third in DOM, but appears second</div>
</div>

<!-- Responsive ordering -->
<div class="row">
    <div class="col order-2 order-md-1">
        Second on mobile, first on desktop
    </div>
    <div class="col order-1 order-md-2">
        First on mobile, second on desktop
    </div>
</div>

<!-- First and last utilities -->
<div class="row">
    <div class="col order-last">Appears last</div>
    <div class="col">Middle</div>
    <div class="col order-first">Appears first</div>
</div>
        

Order Classes:

order-0 to order-5 - Set specific order (0 is default)
order-first - Force column to appear first (-1 order)
order-last - Force column to appear last (6 order)
Add breakpoint prefix: order-md-2, order-lg-first

4. Offset Columns

Move columns to the right using offset classes:

<!-- Basic offset -->
<div class="row">
    <div class="col-md-4">4 columns</div>
    <div class="col-md-4 offset-md-4">4 columns with 4 column offset</div>
</div>

<!-- Centering with offset -->
<div class="row">
    <div class="col-md-6 offset-md-3">
        Centered 6-column content
    </div>
</div>

<!-- Responsive offsets -->
<div class="row">
    <div class="col-md-4 offset-md-2 col-lg-6 offset-lg-0">
        Offset on medium screens, no offset on large screens
    </div>
</div>

<!-- Remove offset -->
<div class="row">
    <div class="col-6 offset-3 offset-md-0">
        Offset on mobile, no offset on desktop
    </div>
</div>

<!-- Margin auto alternative -->
<div class="row">
    <div class="col-md-4 ms-auto">Pushed to right</div>
</div>

<div class="row">
    <div class="col-md-4 mx-auto">Centered</div>
</div>
        

Warning: Offsets only work with column sizing. You can't use offsets with auto-width columns (col).

5. Gutters and Spacing

Control spacing between columns using gutter classes:

<!-- No gutters -->
<div class="row g-0">
    <div class="col-6">No gutter</div>
    <div class="col-6">No gutter</div>
</div>

<!-- Standard gutters (default is g-3 equivalent) -->
<div class="row g-2">
    <div class="col-6">Small gutter</div>
    <div class="col-6">Small gutter</div>
</div>

<div class="row g-5">
    <div class="col-6">Large gutter</div>
    <div class="col-6">Large gutter</div>
</div>

<!-- Horizontal gutters only -->
<div class="row gx-5">
    <div class="col-6">Horizontal gutter only</div>
    <div class="col-6">Horizontal gutter only</div>
</div>

<!-- Vertical gutters only -->
<div class="row gy-5">
    <div class="col-6">Vertical gutter only</div>
    <div class="col-6">Vertical gutter only</div>
    <div class="col-6">Vertical gutter only</div>
</div>

<!-- Responsive gutters -->
<div class="row g-2 g-md-4 g-lg-5">
    <div class="col-6">Responsive gutters</div>
    <div class="col-6">Responsive gutters</div>
</div>
        

Gutter Classes:

g-0 to g-5 - All gutters (horizontal and vertical)
gx-* - Horizontal gutters only
gy-* - Vertical gutters only
Scale: 0 (0), 1 (0.25rem), 2 (0.5rem), 3 (1rem), 4 (1.5rem), 5 (3rem)

6. Combining Alignment Features

Combine multiple alignment techniques for complex layouts:

<!-- Card layout with perfect centering -->
<div class="row align-items-center justify-content-center" style="min-height: 400px;">
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Centered Card</h5>
                <p class="card-text">Perfectly centered both horizontally and vertically.</p>
            </div>
        </div>
    </div>
</div>

<!-- Sidebar layout with responsive ordering -->
<div class="row g-4">
    <div class="col-lg-8 order-2 order-lg-1">
        <!-- Main content appears second on mobile, first on desktop -->
        <h2>Main Content</h2>
        <p>Article content here...</p>
    </div>
    <div class="col-lg-4 order-1 order-lg-2">
        <!-- Sidebar appears first on mobile, second on desktop -->
        <h3>Sidebar</h3>
        <p>Navigation links...</p>
    </div>
</div>

<!-- Feature boxes with spacing and alignment -->
<div class="row g-4 justify-content-center">
    <div class="col-md-4 d-flex">
        <div class="card w-100">
            <div class="card-body d-flex flex-column">
                <h5 class="card-title">Feature 1</h5>
                <p class="card-text flex-grow-1">Description</p>
                <a href="#" class="btn btn-primary mt-auto">Learn More</a>
            </div>
        </div>
    </div>
    <div class="col-md-4 d-flex">
        <div class="card w-100">
            <div class="card-body d-flex flex-column">
                <h5 class="card-title">Feature 2</h5>
                <p class="card-text flex-grow-1">Description</p>
                <a href="#" class="btn btn-primary mt-auto">Learn More</a>
            </div>
        </div>
    </div>
</div>
        

Practice Exercise

Create a product showcase layout with these requirements:

Header section centered vertically (200px height) with a title
Three product cards that:
- Stack vertically on mobile (1 column each)
- Display 2 columns on tablets (one card centered on second row)
- Display 3 columns on desktop with large gutters (g-4)
On mobile, show "Special Offer" card first using order classes
Footer section with two columns:
- Copyright (left-aligned on desktop, centered on mobile)
- Social links (right-aligned on desktop, centered on mobile)
Use offsets to center a subscription form (6 columns wide with 3-column offset)

<!-- Your solution here -->
<div class="container">
    <!-- Header -->
    <div class="row align-items-center" style="height: 200px;">
        <!-- Add your header content -->
    </div>

    <!-- Products -->
    <div class="row g-4">
        <!-- Add your product cards with proper classes -->
    </div>

    <!-- Subscription form -->
    <div class="row mt-5">
        <!-- Add centered form with offset -->
    </div>

    <!-- Footer -->
    <div class="row mt-5">
        <!-- Add footer columns -->
    </div>
</div>
        

Best Practices:

Use vertical alignment when you have fixed heights or min-heights
Combine justify-content-between with specific column widths for precise spacing
Use order classes sparingly - they can make maintenance difficult
Offsets are great for centering, but mx-auto can be simpler
Adjust gutters based on content density - use larger gutters for visual breathing room
Test alignment on different screen sizes to ensure responsive behavior