Search
Quick Commands
run:diagnostics Run all system checks
db:connect Connect to primary DB
cache:clear Clear application cache
users:list Show all active users
Notifications

Stay on top of recent system events and updates.

  • Notification avatar
    System Update Available

    Version 2.4.1 is ready to install with new features.

    2 minutes ago

  • AB
    New User Registration

    Alex Brown from Canada has joined the platform.

    15 minutes ago

  • Notification avatar
    Backup Completed

    Daily backup has been successfully completed.

    1 hour ago

  • Notification avatar
    Security Alert

    Unusual login activity detected from new location.

    3 hours ago

  • Notification avatar
    Monthly Report Ready

    Your analytics report for September is now available.

    Yesterday

  • MJ
    Server Maintenance

    Scheduled maintenance will begin at 2:00 AM EST.

    2 days ago

Action Another action Something else here
Separated link

Bootstrap Grid System

Bootstrap's powerful 12-column grid system for creating responsive layouts

info Understanding the Grid

Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. The grid is built with flexbox and is fully responsive.

Key Concepts:

  • Row (.row): A horizontal container that holds columns and uses flexbox
  • Column (.col-*): Vertical containers that sit inside rows. Each row has 12 columns available
  • Breakpoints: xs, sm, md, lg, xl, xxl - Define when layouts change at different screen sizes
  • Gutters: Spacing between columns (using gap utilities or g-* classes)

Basic Grid System

Bootstrap's grid uses 12 columns. You can use any combination of column classes that add up to 12.

Example: Column Distribution
col-12 (100% width)
col-6 (50% width)
col-6 (50% width)
col-4 (33.33% width)
col-4 (33.33% width)
col-4 (33.33% width)
col-3 (25% width)
col-3 (25% width)
col-3 (25% width)
col-3 (25% width)
Source Code
<!-- Basic Grid Structure -->
<div class="row g-3">
    <!-- Full width column -->
    <div class="col-12">
        <div class="bg-primary p-3">col-12 (100%)</div>
    </div>
    
    <!-- Two equal columns -->
    <div class="col-6">
        <div class="bg-secondary p-3">col-6 (50%)</div>
    </div>
    <div class="col-6">
        <div class="bg-secondary p-3">col-6 (50%)</div>
    </div>
    
    <!-- Three equal columns -->
    <div class="col-4">
        <div class="bg-success p-3">col-4 (33.33%)</div>
    </div>
    <div class="col-4">
        <div class="bg-success p-3">col-4 (33.33%)</div>
    </div>
    <div class="col-4">
        <div class="bg-success p-3">col-4 (33.33%)</div>
    </div>
    
    <!-- Four equal columns -->
    <div class="col-3">...</div>
    <div class="col-3">...</div>
    <div class="col-3">...</div>
    <div class="col-3">...</div>
</div>

Responsive Grid

Use responsive column classes to create layouts that adapt to different screen sizes. The grid adjusts from mobile-first (smallest) to largest breakpoint.

Example: Responsive Columns

Resize your browser to see the layout change. This example uses col-12 col-md-6 col-lg-4

col-12
Full width on mobile
col-md-6
50% width on tablets
col-lg-4
33% width on desktop
col-12
Full width on mobile
col-md-6
50% width on tablets
col-lg-4
33% width on desktop
col-12
Full width on mobile
col-md-12
Full width on tablets
col-lg-4
33% width on desktop
Bootstrap Breakpoints
Breakpoint Class Infix Dimensions
Extra small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px
Source Code
<!-- Responsive Grid -->
<div class="row g-3">
    <div class="col-12 col-md-6 col-lg-4">
        <!-- Full width on mobile, 50% on tablet, 33% on desktop -->
    </div>
    <div class="col-12 col-md-6 col-lg-4">
        <!-- Full width on mobile, 50% on tablet, 33% on desktop -->
    </div>
    <div class="col-12 col-md-12 col-lg-4">
        <!-- Full width on mobile and tablet, 33% on desktop -->
    </div>
</div>

Auto Layout Columns

Use .col without a number to create equal-width columns that automatically size to fit the available space.

Example: Equal Width Auto Columns
col (auto)
col (auto)
col (auto)
Mixed Auto and Fixed Width
col-6 (fixed 50%)
col (auto - takes remaining)
col (auto - takes remaining)
Source Code
<!-- Equal width auto columns -->
<div class="row g-3">
    <div class="col">Equal width</div>
    <div class="col">Equal width</div>
    <div class="col">Equal width</div>
</div>

<!-- Mixed fixed and auto -->
<div class="row g-3">
    <div class="col-6">Fixed 50%</div>
    <div class="col">Auto (remaining space divided equally)</div>
    <div class="col">Auto (remaining space divided equally)</div>
</div>

Row Alignment

Use flexbox alignment utilities to align columns horizontally and vertically within rows.

Horizontal Alignment (Justify Content)

Align columns horizontally using justify-content-* classes on the row.

justify-content-start (default)
Start 1
Start 2
justify-content-center
Center 1
Center 2
justify-content-end
End 1
End 2
justify-content-between
Between 1
Between 2
justify-content-around
Around 1
Around 2
justify-content-evenly
Evenly 1
Evenly 2
Vertical Alignment (Align Items)

Align columns vertically using align-items-* classes on the row. Items need different heights to see the effect.

align-items-start
Start
Tall
Start
Short
Start
Taller
align-items-center
Center
Tall
Center
Short
Center
Taller
align-items-end
End
Tall
End
Short
End
Taller
Source Code
<!-- Horizontal Alignment -->
<div class="row justify-content-start">
    <div class="col-auto">Start</div>
</div>
<div class="row justify-content-center">
    <div class="col-auto">Center</div>
</div>
<div class="row justify-content-end">
    <div class="col-auto">End</div>
</div>
<div class="row justify-content-between">
    <div class="col-auto">Between 1</div>
    <div class="col-auto">Between 2</div>
</div>
<div class="row justify-content-around">
    <div class="col-auto">Around 1</div>
    <div class="col-auto">Around 2</div>
</div>
<div class="row justify-content-evenly">
    <div class="col-auto">Evenly 1</div>
    <div class="col-auto">Evenly 2</div>
</div>

<!-- Vertical Alignment -->
<div class="row align-items-start" style="min-height: 120px;">
    <div class="col-auto">Start aligned</div>
</div>
<div class="row align-items-center" style="min-height: 120px;">
    <div class="col-auto">Center aligned</div>
</div>
<div class="row align-items-end" style="min-height: 120px;">
    <div class="col-auto">End aligned</div>
</div>

Column Alignment

Align individual columns using align-self-* utilities.

Example: Individual Column Alignment

Each column can have its own vertical alignment within a row.

Start
Center
End
Start
Taller
Center
End
Tallest
Source Code
<!-- Individual Column Alignment -->
<div class="row" style="min-height: 150px;">
    <div class="col-auto align-self-start">Start</div>
    <div class="col-auto align-self-center">Center</div>
    <div class="col-auto align-self-end">End</div>
    <div class="col-auto align-self-start">Start (taller)</div>
    <div class="col-auto align-self-center">Center</div>
    <div class="col-auto align-self-end">End (tallest)</div>
</div>

Column Wrapping

When more than 12 columns are placed in a single row, each group of extra columns wraps to a new line.

Example: Column Wrapping
col-9
col-4
Since 9 + 4 = 13 > 12, this wraps
col-6
This starts a new row
col-6
Completes the second row
Source Code
<!-- Column Wrapping Example -->
<div class="row g-3">
    <div class="col-9">col-9</div>
    <div class="col-4">col-4 (wraps because 9+4=13 > 12)</div>
    <div class="col-6">col-6 (starts new row)</div>
    <div class="col-6">col-6 (completes row)</div>
</div>

Column Offsets

Use offset classes to push columns to the right. Useful for centering or creating spacing.

Example: Column Offsets
col-md-4 offset-md-4
Centered column
col-md-3
col-md-3 offset-md-3
col-md-6 offset-md-3
Centered half-width column
Source Code
<!-- Centered Column -->
<div class="row">
    <div class="col-md-4 offset-md-4">
        Centered column (4 cols + 4 offset = 8, leaves 4 on right)
    </div>
</div>

<!-- Offset for spacing -->
<div class="row">
    <div class="col-md-3">Column 1</div>
    <div class="col-md-3 offset-md-3">Column 2 (with offset)</div>
</div>

<!-- Centered half-width -->
<div class="row">
    <div class="col-md-6 offset-md-3">
        Centered half-width column
    </div>
</div>

Gutters (Column Spacing)

Control the spacing between columns using gap utilities. The g-* classes add horizontal and vertical gaps.

Example: Different Gutter Sizes
g-0 (no gap)
col-4
col-4
col-4
g-1 (small gap)
col-4
col-4
col-4
g-3 (medium gap - default)
col-4
col-4
col-4
Source Code
<!-- Different Gutter Sizes -->
<!-- No gap -->
<div class="row g-0">
    <div class="col-4">...</div>
</div>

<!-- Small gap -->
<div class="row g-1">
    <div class="col-4">...</div>
</div>

<!-- Medium gap (default) -->
<div class="row g-3">
    <div class="col-4">...</div>
</div>

<!-- Large gap -->
<div class="row g-5">
    <div class="col-4">...</div>
</div>

Nested Grids

You can nest grids inside columns to create more complex layouts. Nested rows use 12 columns within their parent column.

Example: Nested Grid
Outer Column (col-md-8)
Nested col-6
Nested col-6
Nested col-4
Nested col-4
Nested col-4
Outer Column (col-md-4)
Nested col-12
Nested col-12
Source Code
<!-- Nested Grid Example -->
<div class="row g-3">
    <div class="col-md-8">
        <div class="bg-primary p-3">
            Outer Column (8 cols)
            <div class="row g-2 mt-2">
                <div class="col-6">Nested col-6</div>
                <div class="col-6">Nested col-6</div>
                <div class="col-4">Nested col-4</div>
                <div class="col-4">Nested col-4</div>
                <div class="col-4">Nested col-4</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="bg-secondary p-3">
            Outer Column (4 cols)
            <div class="row g-2 mt-2">
                <div class="col-12">Nested col-12</div>
                <div class="col-12">Nested col-12</div>
            </div>
        </div>
    </div>
</div>

Column Ordering

Use order utilities to visually reorder columns. Useful for responsive design where you want different visual order than source order.

Example: Column Ordering

These columns appear in a different visual order than their source order.

Column 1
order-md-3 (appears last)
Column 2
order-md-1 (appears first)
Column 3
order-md-2 (appears middle)
Source Code
<!-- Column Ordering -->
<div class="row g-3">
    <div class="col-md-4 order-md-3">
        Column 1 (visual order: 3rd)
    </div>
    <div class="col-md-4 order-md-1">
        Column 2 (visual order: 1st)
    </div>
    <div class="col-md-4 order-md-2">
        Column 3 (visual order: 2nd)
    </div>
</div>

Practical Example: Dashboard Layout

A real-world example combining multiple grid concepts to create a responsive dashboard layout.

Header Section
col-12 (full width)
Sidebar
col-12 col-lg-3
Main Content Area
col-12 col-lg-9
Card 1
Card 2
Card 3
Card 4
Card 5
Footer Section
col-12 (full width)
Source Code
<!-- Dashboard Layout Example -->
<div class="row g-3">
    <!-- Header -->
    <div class="col-12">
        <div class="bg-primary text-white p-3">Header</div>
    </div>
</div>

<div class="row g-3">
    <!-- Sidebar (full width on mobile, 25% on large screens) -->
    <div class="col-12 col-lg-3">
        <div class="bg-body-secondary p-3">Sidebar</div>
    </div>
    
    <!-- Main Content (full width on mobile, 75% on large screens) -->
    <div class="col-12 col-lg-9">
        <div class="bg-body-secondary p-3">
            Main Content
            <!-- Nested grid for cards -->
            <div class="row g-2 mt-2">
                <div class="col-md-6">Card 1</div>
                <div class="col-md-6">Card 2</div>
                <div class="col-md-4">Card 3</div>
                <div class="col-md-4">Card 4</div>
                <div class="col-md-4">Card 5</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    <!-- Footer -->
    <div class="col-12">
        <div class="bg-secondary text-white p-3">Footer</div>
    </div>
</div>