Bootstrap 5 Framework

Grid Utilities and Customization

13 min Lesson 7 of 40

Grid Utilities and Customization

Bootstrap 5 provides powerful utility classes that enhance grid functionality and allow for fine-tuned control over layouts. Let's explore advanced grid utilities and customization options.

1. Advanced Gutter Control

Master the art of spacing with comprehensive gutter utilities:

<!-- Standard gutter sizes -->
<div class="row g-0">  <!-- 0rem / 0px -->
    <div class="col">No gutter</div>
</div>

<div class="row g-1">  <!-- 0.25rem / 4px -->
    <div class="col">Tiny gutter</div>
</div>

<div class="row g-2">  <!-- 0.5rem / 8px -->
    <div class="col">Small gutter</div>
</div>

<div class="row g-3">  <!-- 1rem / 16px -->
    <div class="col">Default gutter</div>
</div>

<div class="row g-4">  <!-- 1.5rem / 24px -->
    <div class="col">Medium gutter</div>
</div>

<div class="row g-5">  <!-- 3rem / 48px -->
    <div class="col">Large gutter</div>
</div>

<!-- Directional gutters -->
<div class="row gx-5">  <!-- Horizontal only -->
    <div class="col-6">Wide horizontal spacing</div>
    <div class="col-6">Wide horizontal spacing</div>
</div>

<div class="row gy-5">  <!-- Vertical only -->
    <div class="col-12">Tall vertical spacing</div>
    <div class="col-12">Tall vertical spacing</div>
</div>

<!-- Responsive gutters -->
<div class="row g-2 g-sm-3 g-md-4 g-lg-5">
    <div class="col-6">Gutters grow with screen size</div>
    <div class="col-6">Gutters grow with screen size</div>
</div>

<!-- Mixed directional gutters -->
<div class="row gx-3 gy-4">
    <div class="col-6">Different horizontal and vertical gutters</div>
    <div class="col-6">Different horizontal and vertical gutters</div>
</div>
        

Gutter Quick Reference:

g-* - Sets both horizontal and vertical gutters
gx-* - Horizontal gutters only (left and right padding)
gy-* - Vertical gutters only (top and bottom margins)
Sizes: 0, 1 (0.25rem), 2 (0.5rem), 3 (1rem), 4 (1.5rem), 5 (3rem)
Add breakpoints: g-md-4, gx-lg-5

2. Row Columns Utility

Quickly create equal-width columns without explicit col-* classes:

<!-- Basic row-cols: All children are equal width -->
<div class="row row-cols-1">
    <div class="col">Full width (1 per row)</div>
    <div class="col">Full width (1 per row)</div>
</div>

<div class="row row-cols-2">
    <div class="col">50% width (2 per row)</div>
    <div class="col">50% width (2 per row)</div>
    <div class="col">50% width (2 per row)</div>
    <div class="col">50% width (2 per row)</div>
</div>

<div class="row row-cols-3">
    <div class="col">33.33% width (3 per row)</div>
    <div class="col">33.33% width (3 per row)</div>
    <div class="col">33.33% width (3 per row)</div>
</div>

<!-- Responsive row-cols -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
    <div class="col">1 on mobile, 2 on sm, 3 on md, 4 on lg</div>
    <div class="col">1 on mobile, 2 on sm, 3 on md, 4 on lg</div>
    <div class="col">1 on mobile, 2 on sm, 3 on md, 4 on lg</div>
    <div class="col">1 on mobile, 2 on sm, 3 on md, 4 on lg</div>
    <div class="col">1 on mobile, 2 on sm, 3 on md, 4 on lg</div>
    <div class="col">1 on mobile, 2 on sm, 3 on md, 4 on lg</div>
</div>

<!-- Combining row-cols with specific column widths -->
<div class="row row-cols-3">
    <div class="col">33.33%</div>
    <div class="col-6">50% (overrides row-cols)</div>
    <div class="col">Wraps to next row</div>
</div>

<!-- Practical example: Product grid -->
<div class="row row-cols-2 row-cols-lg-4 g-3">
    <div class="col">
        <div class="card">
            <img src="product1.jpg" class="card-img-top" alt="Product 1">
            <div class="card-body">
                <h5 class="card-title">Product 1</h5>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img src="product2.jpg" class="card-img-top" alt="Product 2">
            <div class="card-body">
                <h5 class="card-title">Product 2</h5>
            </div>
        </div>
    </div>
    <!-- More products... -->
</div>
        

When to use row-cols: Perfect for uniform grids like product listings, image galleries, or card decks where all items should be the same width. It's cleaner than adding col-* to every child element.

3. Display Utilities with Grid

Combine display utilities with grid for powerful layout control:

<!-- Hide/show columns at different breakpoints -->
<div class="row">
    <div class="col-12 col-md-6">Always visible</div>
    <div class="col-12 col-md-6 d-none d-md-block">
        Hidden on mobile, visible on md and up
    </div>
</div>

<!-- Show different content at different sizes -->
<div class="row">
    <div class="col d-md-none">
        <!-- Mobile navigation -->
        <button class="btn btn-primary">☰ Menu</button>
    </div>
    <div class="col d-none d-md-block">
        <!-- Desktop navigation -->
        <nav>Home | About | Contact</nav>
    </div>
</div>

<!-- Flexbox utilities with grid -->
<div class="row">
    <div class="col d-flex align-items-center justify-content-center">
        <div>Perfectly centered content</div>
    </div>
</div>

<!-- Flex direction utilities -->
<div class="row">
    <div class="col d-flex flex-column">
        <div>Item 1</div>
        <div class="mt-auto">Item 2 (pushed to bottom)</div>
    </div>
</div>

<!-- Equal height cards using flex -->
<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col d-flex">
        <div class="card w-100">
            <div class="card-body d-flex flex-column">
                <h5 class="card-title">Card 1</h5>
                <p class="card-text">Short content</p>
                <a href="#" class="btn btn-primary mt-auto">Button</a>
            </div>
        </div>
    </div>
    <div class="col d-flex">
        <div class="card w-100">
            <div class="card-body d-flex flex-column">
                <h5 class="card-title">Card 2</h5>
                <p class="card-text">Much longer content that makes this card taller than the others in the row</p>
                <a href="#" class="btn btn-primary mt-auto">Button</a>
            </div>
        </div>
    </div>
    <div class="col d-flex">
        <div class="card w-100">
            <div class="card-body d-flex flex-column">
                <h5 class="card-title">Card 3</h5>
                <p class="card-text">Medium content</p>
                <a href="#" class="btn btn-primary mt-auto">Button</a>
            </div>
        </div>
    </div>
</div>
        

Display Utilities:

d-none - Hide element
d-block - Display as block
d-flex - Display as flex container
d-inline-flex - Display as inline flex
Add breakpoints: d-md-none, d-lg-block

4. Flexbox Utilities Integration

Bootstrap's flexbox utilities work seamlessly with the grid system:

<!-- Alignment utilities -->
<div class="row align-items-start">Top aligned</div>
<div class="row align-items-center">Center aligned</div>
<div class="row align-items-end">Bottom aligned</div>

<!-- Self alignment -->
<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>

<!-- Justify content -->
<div class="row justify-content-start">...</div>
<div class="row justify-content-center">...</div>
<div class="row justify-content-end">...</div>
<div class="row justify-content-between">...</div>
<div class="row justify-content-around">...</div>
<div class="row justify-content-evenly">...</div>

<!-- Flex wrap -->
<div class="row flex-wrap">...</div>
<div class="row flex-nowrap">...</div>
<div class="row flex-wrap-reverse">...</div>

<!-- Flex direction -->
<div class="row flex-row">...</div>
<div class="row flex-row-reverse">...</div>
<div class="row flex-column">...</div>
<div class="row flex-column-reverse">...</div>

<!-- Flex fill and grow -->
<div class="row">
    <div class="col flex-fill">Flex fill</div>
    <div class="col flex-grow-1">Flex grow</div>
    <div class="col flex-shrink-1">Flex shrink</div>
</div>

<!-- Practical: Sticky footer layout -->
<div class="container d-flex flex-column" style="min-height: 100vh;">
    <div class="row">
        <div class="col">Header</div>
    </div>
    <div class="row flex-grow-1">
        <div class="col">Main content expands</div>
    </div>
    <div class="row">
        <div class="col">Footer always at bottom</div>
    </div>
</div>
        

5. Spacing Utilities with Grid

Fine-tune spacing within and around grid elements:

<!-- Margin utilities -->
<div class="row">
    <div class="col mb-3">Margin bottom</div>
    <div class="col mt-3">Margin top</div>
    <div class="col mx-3">Margin horizontal</div>
    <div class="col my-3">Margin vertical</div>
</div>

<!-- Padding utilities -->
<div class="row">
    <div class="col p-3">Padding all sides</div>
    <div class="col px-4">Horizontal padding</div>
    <div class="col py-4">Vertical padding</div>
</div>

<!-- Remove negative margins from row -->
<div class="row g-0 mx-0">
    <div class="col">No negative margins</div>
</div>

<!-- Auto margins for positioning -->
<div class="row">
    <div class="col-6 ms-auto">Pushed to right</div>
</div>

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

<!-- Responsive spacing -->
<div class="row">
    <div class="col mb-3 mb-md-4 mb-lg-5">
        Responsive bottom margin
    </div>
</div>

<!-- Spacing scale: 0-5 -->
<!-- 0 = 0, 1 = 0.25rem, 2 = 0.5rem, 3 = 1rem, 4 = 1.5rem, 5 = 3rem -->
        

Spacing Tips:

Use g-* for consistent spacing between columns
Use m* and p* utilities for fine-tuning individual elements
Auto margins (ms-auto, mx-auto) are perfect for alignment
Combine with breakpoints for responsive spacing

6. Grid Debugging Tips

Techniques to visualize and debug grid layouts:

<!-- Method 1: Add temporary borders -->
<style>
  .debug .row {
    border: 2px solid red;
    margin-bottom: 10px;
  }
  .debug .col,
  .debug [class*="col-"] {
    border: 1px solid blue;
    background-color: rgba(0, 123, 255, 0.1);
    padding-top: 10px;
    padding-bottom: 10px;
  }
</style>

<div class="container debug">
    <div class="row">
        <div class="col-4">Column 1</div>
        <div class="col-4">Column 2</div>
        <div class="col-4">Column 3</div>
    </div>
</div>

<!-- Method 2: Use background colors -->
<div class="row">
    <div class="col bg-primary bg-opacity-25">Column 1</div>
    <div class="col bg-success bg-opacity-25">Column 2</div>
    <div class="col bg-warning bg-opacity-25">Column 3</div>
</div>

<!-- Method 3: Add min-height to see alignment -->
<div class="row">
    <div class="col border" style="min-height: 100px;">Column 1</div>
    <div class="col border" style="min-height: 100px;">Column 2</div>
</div>

<!-- Method 4: Use browser DevTools -->
<!--
1. Open DevTools (F12)
2. Select element
3. In Styles panel, find .row or .col classes
4. See computed padding, margins, and widths
5. Use Elements panel to toggle classes on/off
-->
        

Common Grid Issues:

Columns overflowing: Total column numbers exceed 12, or missing .row wrapper
Unexpected spacing: Check for inherited margins/padding or gutter settings
Columns not aligning: Missing .col class or incorrect nesting
Responsive not working: Verify breakpoint classes are correct (sm, md, lg, xl, xxl)
Gutters not showing: Check if g-0 is applied somewhere in the hierarchy

Practice Exercise

Create an advanced photo gallery with these specifications:

Use row-cols-* to display:
- 2 photos per row on mobile
- 3 photos per row on tablets
- 4 photos per row on desktop
- 6 photos per row on extra-large screens
Apply gutters that scale from g-2 on mobile to g-4 on desktop
Each photo card should:
- Use d-flex to make all cards equal height
- Have a subtle hover effect (add on your own)
- Include image, title, and a "View" button
- Use mt-auto to push button to bottom
Add a "Featured" photo that spans 2 columns on tablet and up
Hide the last 3 photos on mobile using display utilities
Center the entire gallery using container and justify utilities

Bonus: Add debug borders to visualize your grid structure, then remove them when done.

Grid Customization Best Practices:

Start with default gutters (g-3) and adjust only if needed
Use row-cols-* for uniform grids to reduce HTML repetition
Combine flexbox utilities sparingly - too many can make code hard to read
Use debug techniques during development, remove before production
Test all responsive breakpoints thoroughly
Document any complex custom grid patterns with comments
Consider CSS Grid for very complex layouts that don't fit Bootstrap's 12-column system