Lesson Content

1. Understanding Breakpoints in Bootstrap

a. What Are Breakpoints?

Definition: Specific viewport widths at which the layout of a website adjusts to provide an optimal viewing experience.
Bootstrap’s Default Breakpoints:
- Extra Small (xs): <576px
- Small (sm): ≥576px
- Medium (md): ≥768px
- Large (lg): ≥992px
- Extra Large (xl): ≥1200px

b. Using Breakpoints in Grid Classes

Syntax: .col-{breakpoint}-{columns}
Example:

html
Copy code
<div class="row">
  <div class="col-sm-6 col-md-4 col-lg-3">
    Column Content
  </div>
  <!-- Repeat for additional columns -->
</div>

2. Bootstrap Responsive Utility Classes

a. Display Utilities

Purpose: Control the display property of elements based on screen size.
Common Classes:
- .d-none: Hides the element on all screen sizes.
- .d-sm-block: Displays as block on small screens and up.
- .d-md-none: Hides on medium screens and up.
- .d-lg-flex: Displays as flex on large screens and up.
Usage Example:

html
Copy code
<div class="d-none d-md-block">
  This content is hidden on small screens and visible on medium and larger screens.
</div>

<div class="d-block d-lg-none">
  This content is visible on small and medium screens but hidden on large and extra-large screens.
</div>

b. Visibility Utilities (Deprecated in Bootstrap 4)

Note: .visible-* classes have been replaced by display utility classes.
Recommendation: Use display utility classes for controlling element visibility.

3. Hiding and Showing Elements Based on Screen Size

a. Practical Applications

Navigation Menus: Display a hamburger menu on small screens and a full menu on larger screens.
Images: Show different images optimized for various devices.
Content Sections: Prioritize or rearrange content based on screen size.

b. Example: Responsive Navigation Menu

html
Copy code
<!-- Hamburger Menu for Small Screens -->
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarNav">
  <span class="navbar-toggler-icon"></span>
</button>

<!-- Full Menu for Large Screens -->
<ul class="navbar-nav d-none d-lg-flex">
  <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
  <li class="nav-item"><a class="nav-link" href="#">About</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>

4. Combining Responsive Utilities with Grid System

a. Responsive Layout Adjustments

Use display classes alongside grid classes to adjust layouts dynamically.

b. Example: Two-Column Layout on Large Screens, Single Column on Small Screens

html
Copy code
<div class="row">
  <div class="col-md-6 d-none d-md-block">
    <p>This column is visible only on medium and larger screens.</p>
  </div>
  <div class="col-12">
    <p>This column is always visible and spans full width on small screens.</p>
  </div>
</div>

Day 2: Responsive Utilities and Breakpoints in Bootstrap