Bs5 Grid Medium in Bootstrap
Sure! Here’s a focused overview of Bootstrap 5 Grid Medium (.col-md-*) — perfect for controlling layout on medium screens (?768px).
? Bootstrap 5 .col-md-* Grid
.col-md-*classes apply at medium devices and above, meaning screens 768px wide or wider.Below 768px, columns stack vertically (full width) unless smaller breakpoint classes are used.
? Basic .col-md-* Example
<div class="container"> <div class="row"> <div class="col-md-6">Half width on medium+</div> <div class="col-md-6">Half width on medium+</div> </div></div>On screens ?768px, columns take half width each.
On smaller screens, columns stack vertically.
? Responsive Mixing Breakpoints
<div class="container"> <div class="row"> <div class="col-12 col-md-8">Full width xs, two-thirds width md+</div> <div class="col-6 col-md-4">Half width xs, one-third width md+</div> </div></div>Extra small: first column full width, second column half width.
Medium and up: first column 8/12, second column 4/12.
? Offsets on Medium Screens .offset-md-*
<div class="container"> <div class="row"> <div class="col-md-4 offset-md-4">Centered on medium+</div> </div></div>? Ordering Columns .order-md-*
<div class="container"> <div class="row"> <div class="col-md-4 order-md-3">Third on medium+</div> <div class="col-md-4 order-md-1">First on medium+</div> <div class="col-md-4 order-md-2">Second on medium+</div> </div></div>Recap of Medium Breakpoint Classes
| Class | Applies from | Purpose |
|---|---|---|
.col-md-* | ? 768px | Set column width |
.offset-md-* | ? 768px | Offset columns horizontally |
.order-md-* | ? 768px | Change column order |
Bonus: Auto-layout at Medium Screens
<div class="row"> <div class="col-md">Auto width col 1</div> <div class="col-md">Auto width col 2</div> <div class="col-md">Auto width col 3</div></div>Columns share space equally on medium+ screens.
Need me to help with full example layouts using .col-md-* or combining it with other breakpoints? Just say!
