Bootstrap Topicwise Real-Life Examples

1. Responsive Navigation Bar

Real-life use case: Website header with brand, navigation links, and mobile collapse menu.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">LearnHub</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto">...</ul>
    </div>
  </div>
</nav>

2. Product Card Layout

Real-life use case: E-commerce product listing with image, details, and action buttons.

<div class="card shadow-sm h-100">
  <img src="product.jpg" class="card-img-top" alt="Product">
  <div class="card-body">
    <h5 class="card-title">Wireless Headphones</h5>
    <p class="card-text text-muted">Comfort fit with deep bass.</p>
    <div class="d-flex justify-content-between align-items-center">
      <span class="fw-bold text-primary">$89.99</span>
      <button class="btn btn-primary btn-sm">Add to Cart</button>
    </div>
  </div>
</div>

3. Login / Registration Form

Real-life use case: Authentication forms with clear labels, validation, and submit CTA.

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

4. Admin Dashboard Section

Real-life use case: Dashboard statistics and quick actions in a responsive grid.

<div class="container">
  <div class="row g-3">
    <div class="col-md-4">
      <div class="card text-center">
        <div class="card-body">
          <h3 class="mb-1">1,245</h3>
          <p class="text-muted mb-0">Active Users</p>
        </div>
      </div>
    </div>
  </div>
</div>

5. Responsive Layout with Grid + Utilities

Real-life use case: Home page layout that adapts from mobile to desktop.

<div class="row g-4">
  <div class="col-12 col-lg-8">Main content</div>
  <div class="col-12 col-lg-4">Sidebar</div>
</div>

<div class="d-flex flex-column flex-md-row gap-2">
  <button class="btn btn-primary">Primary Action</button>
  <button class="btn btn-outline-secondary">Secondary Action</button>
</div>

6. Alerts, Toasts, and User Feedback

Real-life use case: Showing success/error/info messages after user actions.

<div class="alert alert-success d-flex align-items-center" role="alert">
  <i class="fas fa-check-circle me-2"></i>
  Profile updated successfully.
</div>

<div class="toast show" role="alert">
  <div class="toast-header">
    <strong class="me-auto">Notification</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">New message received.</div>
</div>