Grid for Medium, Large, and Extra Large Screens

Grid for Medium, Large, and Extra Large Screens

Medium screens (md, >= 768px)

Use .col-md-* for tablet-sized screens and up:

<div class="row">
  <div class="col-md-8">col-md-8</div>
  <div class="col-md-4">col-md-4</div>
</div>

Large screens (lg, >= 992px)

.col-lg-* is typical for desktop layouts:

<div class="row">
  <div class="col-lg-3">col-lg-3</div>
  <div class="col-lg-6">col-lg-6</div>
  <div class="col-lg-3">col-lg-3</div>
</div>

Extra large (xl, >= 1200px) and xxl (>= 1400px)

For very wide screens, use .col-xl- and .col-xxl-.

Combining breakpoints for a responsive layout

A common pattern changes the number of columns as the screen grows:

<div class="row">
  <div class="col-sm-6 col-md-4 col-lg-3">A</div>
  <div class="col-sm-6 col-md-4 col-lg-3">B</div>
  <div class="col-sm-6 col-md-4 col-lg-3">C</div>
  <div class="col-sm-6 col-md-4 col-lg-3">D</div>
</div>

• sm: 2 per row (6 wide each)
• md: 3 per row (4 wide each)
• lg: 4 per row (3 wide each)

TL;DR

• .col-md-* starts at 768px.
• .col-lg-* starts at 992px.
• .col-xl- and .col-xxl- cover wide screens.
• Combine infixes for layouts that adapt at each size.