Bootstrap Module 25

 Module 25 : Bootstrap Media Queries Deep Dive. 

1 Media queries let CSS apply only when the viewport matches a condition (width, height, orientation, etc.).

Bootstrap is mobile-first: most built-in CSS uses min-width breakpoints so styles apply from a breakpoint and upwards. This is why .col-sm-4 affects sm and all larger sizes. 

Bootstrap defines six default breakpoints: xs (default, <576px), sm ≥576px, md ≥768px, lg ≥992px, xl ≥1200px, xxl ≥1400px. You can customize via Sass if needed. 

2  Bootstrap implements responsive behavior

Mobile-first base styles — write simple base CSS that works on the smallest screens (this is Bootstrap’s default).

Breakpoints with min-width — add rules that kick in at min-width thresholds to refine layout/scale up elements.

Utility classes + grid — rely on built-in responsive utilities (e.g., .d-md-none, .text-lg-start) and the grid column classes (e.g., .col-md-6) which already embody those media queries.

Customize when needed — add custom CSS media queries or modify Bootstrap’s Sass variables / maps to change breakpoints or generate new responsive utilities.

Why mobile-first 

Fewer overrides for small screens.

Progressive enhancement for more capable viewports.

Better performance on mobile (smaller CSS footprint applied by default).

Bootstrap documentation to point to: Breakpoints, Grid, and Utilities pages. 

3 — Concrete code examples 

3.1 Basic CSS media query (vanilla)

/* Mobile-first base (applies to all) */ .card { padding: 12px; } /* At 768px and up (tablet & above) */ @media (min-width: 768px) { .card { padding: 20px; } } /* Narrow screens only (phones smaller than 576px) */ @media (max-width: 575.98px) { .card { font-size: 14px; } }

Bootstrap uses min-width for breakpoints; max-width is used when you want styles only for smaller-than screens. Use .98 to avoid overlap due to subpixel rounding.

3.2 Using Bootstrap grid & utility classes (no custom CSS)

<div class="row"> <div class="col-12 col-md-6">Left (full width on phones, half on md+)</div> <div class="col-12 col-md-6">Right</div> </div> <!-- show/hide --> <div class="d-none d-sm-block">Visible ≥576px</div> <div class="d-block d-sm-none">Visible <576px</div>

.col-md-6 uses a media query under the hood so you don't have to write @media.

3.3 Sass mixin usage (Bootstrap source approach)

If you use Bootstrap Sass source, the library exposes breakpoint mixins:

// Example using Bootstrap's mixin (in source SCSS) @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; .my-class { font-size: 14px; @include media-breakpoint-up(md) { font-size: 16px; } @include media-breakpoint-down(sm) { font-size: 13px; } }

that mixins read breakpoint variables, making custom breakpoints easy. 

3.4 Targeting a range (between two breakpoints)

/* between 576px and 991.98px (sm <= width < lg) */ @media (min-width: 576px) and (max-width: 991.98px) { .hero { padding: 36px; } }

4  exercises 

Exercise 1 — Responsive two-column card layout

Build a card list that is a single column on phones, two columns on tablets (md), and four columns on desktop (xl).

Starter HTML:

<div class="container"> <div class="row" id="card-list"> <!-- create 8 cards --> <div class="col-12 col-md-6 col-xl-3"> <div class="card p-3">Card 1</div> </div> <!-- repeat --> </div> </div>

Use .col-12 for phones, .col-md-6 for 2 columns at md (≥768px), .col-xl-3 for 4 columns at xl (≥1200px).

Exercise 2 — Show different navigation on small vs large screens

On mobile show a hamburger icon; on desktop show full nav links.

Solution:

<button class="btn d-md-none">☰</button> <!-- shows only on < md --> <nav class="d-none d-md-flex"> <!-- hides < md, shows md+ --> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> </nav>

Teaching point: Utilities .d-md-none and .d-none d-md-flex hide/show without writing media queries.

Exercise 3 — Custom CSS for a component at lg breakpoint

Make .promo background change to an image on large screens and a color on small screens.

Solution:

.promo { background: linear-gradient(#f6f9ff, #fff); padding: 24px; } @media (min-width: 992px) { /* lg */ .promo { background: url('/images/promo-large.jpg') center/cover no-repeat; padding: 48px; } }

Why: Use min-width so larger screens get the richer background.

5  Use this plan.

Concepts — media queries, mobile-first vs desktop-first, breakpoints. (Show Bootstrap breakpoints table). 

Bootstrap grid — live code: responsive columns (col-, col-md-, col-lg-*). 

Utilities — d-*, text-*, spacing utilities, responsive variants. 

Sass & mixins — show media-breakpoint-up mixin and customizing breakpoints.

Advanced patterns — range queries, responsive images, art direction with <picture>.

Testing & debugging — devtools device toolbar, BrowserStack for cross-device testing. 

Add a slide for each demo with the code snippets above and a “common mistakes” slide (mixing up min/max, failing to include .col-12 fallback, assuming fixed pixel sizes).

6 Advanced 

Customize breakpoints via Sass maps — Bootstrap’s _variables.scss exposes $grid-breakpoints map you can change and recompile. Use the utility API to generate new responsive classes. 

Art-directed responsive images — use <picture> and srcset to serve different crop/ratio per breakpoint instead of just scaling.

Performance — lazy-load large background images for larger breakpoints only (use JS + matchMedia or CSS image-set with fallbacks).

Testing matrix — set up visual regression tests (Percy / Chromatic / BackstopJS) for multiple widths: 360px, 412px, 768px, 1024px, 1366px, 1920px. Use BrowserStack or local emulation for device testing. 

7  Common pitfalls 

Don't use fixed breakpoints for content decisions — prefer content-driven breakpoints: change layout when content breaks, not just at arbitrary px. (Show example: change number of columns when text wraps weirdly.)

Avoid many important overrides — signal design should prefer class-based modifications or Sass variables.

Remember retina & DPR — images need srcset; background images used via CSS need higher resolution sources for high DPI.

Test on devices — emulators help, but touch & input differences matter in devices. Use a cross-browser/device. 

8  Example 

Responsive marketing page with hero, feature grid, testimonials carousel, and footer—adapts to 4 breakpoints.

Key files/snippets:

index.html — uses Bootstrap CDN for quick demo (or local compile if customizing sass).

Custom CSS: only minimal rules (hero sizes, background images) in custom.css with targeted media queries at md and lg.

Accessibility: ensure nav collapse has aria attributes and visible focus outlines.

9 — Research 

Official Bootstrap documentation (Breakpoints, Grid, Utilities) — canonical reference for classes & Sass mixins. 

BrowserStack guide on Bootstrap breakpoints — article and testing tips. 

LogRocket blog on CSS breakpoints & fluid layouts — useful for content-first breakpoint design.

10 exercises 

Build a 3-section landing page that:

Collapses to single column on <576px

Uses two columns on md

Uses a 3-column grid for gallery at xl

Provides alternate hero image at ≥992px (lg)

Demonstrates at least three Bootstrap responsive utilities (spacing, display, text alignment)

Grading rubric: layout correctness (40%), code cleanliness & use of Bootstrap (30%), accessibility (15%), responsive testing evidence (screenshots on 3 widths) (15%).

11 reference 

@media (min-width: 576px) { /* sm+ */ }

@media (min-width: 768px) { /* md+ */ }

@media (min-width: 992px) { /* lg+ */ }

@media (min-width: 1200px) { /* xl+ */ }

@media (min-width: 1400px) { /* xxl+ */ } — Bootstrap defaults.