Bootstrap 5 Grid Medium - Complete Bootstrap Tutorial

💻 What is Grid Medium?

Bootstrap's medium grid (md) targets devices 768px and wider, including tablets and smaller laptops. It provides perfect control for medium-sized screens, allowing you to create layouts that look great on iPads and similar devices.


<!-- Basic medium grid example -->
<div class="container">
    <div class="row">
        <div class="col-md-6">Column 1</div>
        <div class="col-md-6">Column 2</div>
    </div>
</div>

Key Medium Grid Concepts

📐

Breakpoint

Activates at 768px width

<div class="col-md-12">Full width</div>

🎯

Tablet Friendly

Perfect for iPad layouts

<div class="col-md-6">Half width</div>

🔄

Flexible

Combines with other sizes

<div class="col-sm-12 col-md-6">Responsive</div>

⚡

Efficient

Optimizes tablet space

<div class="col-md-4">Third width</div>

🔹 Basic Medium Grid Layout

Designed for tablets and larger screens, the medium grid creates three equal columns that stack vertically on smaller devices. Using .col-md-4 classes, each column occupies 4 of 12 grid units, offering a balanced layout ideal for displaying content like blog posts, product cards, or feature lists. This breakpoint (md, ≥768px) caters specifically to tablet users who need more visible content than on phones but less than desktop layouts. Responsive design ensures optimal viewing across devices, improving user experience, engagement, and SEO through mobile-friendly, fast-loading, and well-structured content presentation.

<div class="container">
    <div class="row">
        <div class="col-md-4 bg-primary text-white p-3">
            Column 1
        </div>
        <div class="col-md-4 bg-secondary text-white p-3">
            Column 2
        </div>
        <div class="col-md-4 bg-info text-white p-3">
            Column 3
        </div>
    </div>
</div>

Output:

Column 1

Column 2

Column 3

🔹 Content and Sidebar Layout

A classic and highly effective layout for blogs, articles, and content-rich pages, using an 8-4 column split. The main content area (8 columns) provides an optimal reading width for long-form text, while the sidebar (4 columns) holds supplementary content like related links, ads, or navigation. On mobile devices, the sidebar moves below the main content for better readability and flow. This structure enhances user experience by prioritizing content hierarchy, improves SEO through clear content focus and semantic markup, and increases page engagement by keeping relevant information accessible without cluttering the primary reading area.

<div class="container">
    <div class="row">
        <div class="col-md-8 bg-light p-3">
            <h3>Main Content</h3>
            <p>Article content goes here...</p>
        </div>
        <div class="col-md-4 bg-secondary text-white p-3">
            <h4>Sidebar</h4>
            <p>Widget content here...</p>
        </div>
    </div>
</div>

Output:

Main Content

A dedicated widget area typically placed in the sidebar to display supplementary information, calls-to-action, or interactive elements. Common widgets include recent posts, newsletter signups, social media feeds, or category lists. Widgets should be concise, relevant, and non-intrusive to complement the main content without distracting from it. Properly coded with semantic HTML and accessible labels, widgets enhance user engagement, encourage further site exploration, and can improve SEO by increasing internal linking, reducing exit rates, and providing additional structured content for search engines to index.

Sidebar

Widget content here...

🔹 Four Column Grid

Perfect for product showcases, feature highlights, or team member displays, the four-column grid divides content into equal quarters. Each column uses .col-3 (taking 3 out of 12 grid units) to create a balanced, visually appealing layout that works beautifully on tablets in landscape mode, displaying all items without horizontal scrolling. This arrangement maintains readability and visual hierarchy while efficiently using space. On mobile devices, columns stack vertically to ensure content remains accessible. Implementing this grid with semantic HTML and proper image optimization improves page load times, enhances user experience, and supports SEO through clear content organization and mobile-friendly design.

<div class="container">
    <div class="row">
        <div class="col-md-3 bg-primary text-white p-3">
            Product 1
        </div>
        <div class="col-md-3 bg-success text-white p-3">
            Product 2
        </div>
        <div class="col-md-3 bg-warning text-dark p-3">
            Product 3
        </div>
        <div class="col-md-3 bg-danger text-white p-3">
            Product 4
        </div>
    </div>
</div>

Output:

Product 1

Product 2

Product 3

Product 4

🔹 Combining Breakpoints

Create truly adaptive designs by mixing small (sm), medium (md), and large (lg) grid classes to define different layouts for different screen sizes. For example, use .col-12 .col-sm-6 .col-md-4 to make an element full-width on phones, two-column on small tablets, and three-column on medium tablets. This granular control is key to responsive design that optimally adapts to every device, improving user engagement and reducing bounce rates. Search engines favor such mobile-optimized, fast-loading layouts, which directly contribute to better SEO rankings and increased organic traffic through enhanced Core Web Vitals and user experience signals.

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 bg-info text-white p-3">
            Box 1
        </div>
        <div class="col-sm-6 col-md-4 bg-warning text-dark p-3">
            Box 2
        </div>
        <div class="col-sm-6 col-md-4 bg-success text-white p-3">
            Box 3
        </div>
    </div>
</div>

Output:

Box 1

Box 2

Box 3

🔹 Nested Columns

Build sophisticated, complex layouts by placing rows inside columns, creating a nested 12-column grid within a parent column. This powerful technique allows for advanced page structures like dashboard widgets with multiple internal sections, detailed product displays, or intricate portfolio layouts. Each nested row operates independently, providing precise control over internal alignment and spacing. Using semantic HTML5 elements and maintaining a clear document structure within nested grids enhances accessibility and helps search engines better understand content hierarchy and relationships, positively impacting SEO through improved content indexing and user engagement metrics.

<div class="container">
    <div class="row">
        <div class="col-md-8 bg-light p-3">
            <div class="row">
                <div class="col-md-6 bg-primary text-white p-2">
                    Nested 1
                </div>
                <div class="col-md-6 bg-secondary text-white p-2">
                    Nested 2
                </div>
            </div>
        </div>
        <div class="col-md-4 bg-info text-white p-3">
            Sidebar
        </div>
    </div>
</div>

Output:

Nested 1

Nested 2

Sidebar