Bootstrap Topicwise Programs | Nikhil Learn Hub

1. Grid System

Program: Responsive 3-2-1 Layout

Goal: Show 3 cards on desktop, 2 on tablet, and 1 on mobile.

<div class="row g-3">
  <div class="col-12 col-md-6 col-lg-4">Card 1</div>
  <div class="col-12 col-md-6 col-lg-4">Card 2</div>
  <div class="col-12 col-md-6 col-lg-4">Card 3</div>
</div>

2. Utility Classes

Program: Styled Callout Box

Goal: Build a callout using spacing, background, border, and text utilities only.

<div class="p-4 mb-3 bg-light border border-primary rounded-3 shadow-sm">
  <h5 class="text-primary fw-bold mb-2">Bootstrap Utilities</h5>
  <p class="mb-0 text-muted">No custom CSS needed for common UI styling.</p>
</div>

3. Forms

Program: Compact Login Form

Goal: Create a clean login form with labels and validation states.

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control" required>
  </div>
  <div class="mb-3">
    <label class="form-label">Password</label>
    <input type="password" class="form-control" required>
  </div>
  <button class="btn btn-primary w-100">Sign In</button>
</form>

4. Cards

Program: Product Card with CTA

Goal: Build a reusable card for product or course display.

<div class="card shadow-sm" style="max-width: 22rem;">
  <img src="https://via.placeholder.com/400x220" class="card-img-top" alt="Course">
  <div class="card-body">
    <h5 class="card-title">Bootstrap Mastery</h5>
    <p class="card-text">Build responsive UIs with real-world components.</p>
    <a href="#" class="btn btn-primary">Enroll Now</a>
  </div>
</div>

5. Flex Utilities

Program: Action Bar with Aligned Buttons

Goal: Align title on left and action buttons on right.

<div class="d-flex justify-content-between align-items-center p-3 bg-light border rounded">
  <h6 class="mb-0">Users</h6>
  <div class="d-flex gap-2">
    <button class="btn btn-outline-secondary btn-sm">Filter</button>
    <button class="btn btn-primary btn-sm">Add User</button>
  </div>
</div>

6. Responsive Components

Program: Collapsing Navbar + Offcanvas

Goal: Create mobile-friendly navigation that collapses smoothly.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileMenu">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>