Bootstrap Grid Medium (.col-md-*)

The Medium (md) grid classes in Bootstrap activate when the screen reaches 768px wide or larger. This breakpoint is traditionally aimed at standard tablets (like an iPad in portrait mode) and smaller laptop screens.

The .col-md-* Breakpoint

When you use .col-md-*, the layout will stay vertically stacked (100% width) on all smartphones (both portrait and landscape). It will only flip into a side-by-side horizontal layout once the screen is comfortably wide enough on a tablet.

Example 1: Three Equal Columns (33.3%)

In this example, three .col-md-4 columns will sit side-by-side on tablets and desktops. If you resize your browser window below 768px, they will immediately stack on top of each other.

<div class="container">
    <div class="row">
        <div class="col-md-4">First Column</div>
        <div class="col-md-4">Second Column</div>
        <div class="col-md-4">Third Column</div>
    </div>
</div>

Example 2: An Uneven 8/4 Layout

A very common web layout is having a large reading area (taking up 2/3 of the space) and a smaller sidebar (taking 1/3). You can achieve this using .col-md-8 and .col-md-4. On mobile screens, the reading area will come first, followed natively by the sidebar underneath.

<div class="container">
    <div class="row">
        <div class="col-md-8">Main Article Content</div>
        <div class="col-md-4">Sidebar Widgets</div>
    </div>
</div>

Mixing 'sm' and 'md' Breakpoints

Bootstrap lets you apply multiple grid classes to the same element to create highly complex layouts that shift smoothly across sizes.

For example, if you use class="col-sm-6 col-md-4", the element will take up 50% width on small phones, but shrink to 33.3% width when the screen gets larger to accommodate a tablet.

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4">Mixed responsive sizes</div>
    </div>
</div>

Summary Table

Watch how the 'medium' grid behavior changes across breakpoints below: