📌 Objective: Learn how breakpoints work in Bootstrap and how to use Flexbox utilities for responsive layouts.
🔹 1. What Are Bootstrap Breakpoints?
Breakpoints are specific screen widths where Bootstrap adjusts layouts based on device size.
This makes Bootstrap mobile-first, meaning designs start with small screens and scale up.
💡 Why Use Breakpoints?
✔️ Ensure content fits different screen sizes
✔️ Design mobile-first, then scale for larger devices
✔️ Create custom layouts for specific screen widths
🔹 2. Bootstrap’s Responsive Breakpoints
| Breakpoint | Class Prefix | Screen Size |
|---|---|---|
| Extra Small | .col- |
<576px |
| Small | .col-sm- |
≥576px |
| Medium | .col-md- |
≥768px |
| Large | .col-lg- |
≥992px |
| Extra Large | .col-xl- |
≥1200px |
| XXL | .col-xxl- |
≥1400px |
💡 How to Use Breakpoints?
- Add prefixes (
.col-sm-*,.col-md-*, etc.) to specify layouts for different screen sizes.
✅ Example: Responsive Columns
🔹 What happens?
- On small screens (
sm) → Each column takes full width (12/12) - On medium screens (
md) → Columns take half width (6/12) - On large screens (
lg) → First column takes 4/12, second takes 8/12
🔹 3. Introduction to Bootstrap Flexbox
💡 What is Flexbox?
Flexbox is a CSS layout model that makes it easier to align elements horizontally or vertically.
💡 Why Use Flexbox in Bootstrap?
✔️ Easier alignment of content
✔️ Equal column heights automatically
✔️ Works with Bootstrap’s grid system
🔹 4. Bootstrap Flexbox Utilities
1️⃣ Display Flex (d-flex)
- Enables flexbox layout on an element.
✅ Example: Applying d-flex to a Row
🔹 What happens? The elements align horizontally in a row.
2️⃣ Justify Content (justify-content-*)
Controls horizontal alignment inside a flex container.
| Class | Alignment |
|---|---|
.justify-content-start |
Left-aligned |
.justify-content-center |
Centered |
.justify-content-end |
Right-aligned |
.justify-content-between |
Evenly distributed |
.justify-content-around |
Equal space around |
✅ Example: Centering Content Horizontally
3️⃣ Align Items (align-items-*)
Controls vertical alignment of flex items.
| Class | Alignment |
|---|---|
.align-items-start |
Align to top |
.align-items-center |
Align to center |
.align-items-end |
Align to bottom |
✅ Example: Centering Content Vertically
🔹 What happens? The box is centered vertically inside the div.
4️⃣ Flex Direction (flex-*)
Controls the direction of flex items.
| Class | Effect |
|---|---|
.flex-row |
Default (left to right) |
.flex-row-reverse |
Right to left |
.flex-column |
Stacked vertically |
.flex-column-reverse |
Stacked bottom to top |
✅ Example: Stacking Items Vertically
🔹 5. Combining Breakpoints & Flexbox
You can use breakpoints to adjust Flexbox behavior at different screen sizes.
✅ Example: Changing Alignment Based on Screen Size
🔹 What happens?
- On small screens → Items stack vertically (
flex-column) - On medium screens (
md) & larger → Items align horizontally (flex-row)
📝 Lesson Recap Quiz
🎯 Test your understanding of breakpoints & Flexbox.
📌 Multiple-Choice Questions (MCQs)
1️⃣ What is the default number of columns in Bootstrap’s grid system?
a) 6
b) 8
c) 12
d) 16
✅ Correct Answer: c) 12
2️⃣ Which Bootstrap class makes an element a Flexbox container?
a) .display-flex
b) .flexbox
c) .d-flex
d) .row-flex
✅ Correct Answer: c) .d-flex
3️⃣ What does .justify-content-between do?
a) Centers items inside a Flexbox container
b) Aligns items to the start of the row
c) Distributes items with space between them
d) Makes items stack vertically
✅ Correct Answer: c) Distributes items with space between them
📌 True or False
4️⃣ Bootstrap’s grid system is based on Flexbox.
✅ Answer: True
5️⃣ The .flex-column class makes items align horizontally.
✅ Answer: False (It stacks items vertically.)
🎯 Practical Challenge
✅ Create a responsive navigation bar using d-flex and .justify-content-between.
✅ Adjust alignment for different screen sizes using breakpoints (.flex-column, .flex-row).
✅ Post your solution in the discussion forum for feedback!
🎓 Lesson Summary
✅ Breakpoints define responsive behavior at different screen sizes.
✅ .col-sm-*, .col-md-*, .col-lg-* adjust column widths at different breakpoints.
✅ Flexbox (d-flex) simplifies alignment, spacing, and responsiveness.
✅ Use justify-content-*, align-items-*, and flex-column/row for dynamic layouts.