🎯 Get Started with Bootstrap 5

📖 What is Bootstrap 5?

Simple Explanation: Bootstrap is like a big toy box full of ready-made building blocks for websites! Instead of creating buttons, menus, and cards from scratch, you just pick what you need and use it. It's like LEGO for websites! 🧱✨

Proper Definition: Bootstrap 5 is a powerful, open-source CSS framework that provides pre-built components, responsive grid system, and utility classes for rapid web development. It enables developers to create mobile-first, responsive websites quickly and efficiently.

💡 Why Use Bootstrap 5?

  • ✅ Rapid Development: Build websites 10x faster with pre-built components
  • ✅ Responsive by Default: Works perfectly on all devices (mobile, tablet, desktop)
  • ✅ Consistent Design: Professional look across all browsers
  • ✅ No jQuery: Bootstrap 5 removed jQuery dependency (lighter & faster)
  • ✅ Customizable: Easy to customize with Sass variables
  • ✅ Large Community: Tons of resources, themes, and support

🚀 How to Use Bootstrap 5

Method 1: CDN (Quickest - For Learning)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 App</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-center text-primary">Hello Bootstrap!</h1>
    
    <!-- Bootstrap JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Method 2: NPM (For Production)

# Install Bootstrap
npm install bootstrap

# Import in your CSS/SCSS
@import "bootstrap/scss/bootstrap";

# Or import in JavaScript
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

⚛️ With React

React
// Install
npm install bootstrap

// Import in index.js or App.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

// Component Example
function App() {
  return (
    <div className="container mt-5">
      <h1 className="text-primary">Hello Bootstrap + React!</h1>
      <button className="btn btn-success">Click Me</button>
    </div>
  );
}

▲ With Next.js

Next.js
// Install
npm install bootstrap

// Import in _app.js
import 'bootstrap/dist/css/bootstrap.min.css';
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    import('bootstrap/dist/js/bootstrap.bundle.min.js');
  }, []);

  return <Component {...pageProps} />;
}

// Use in any page
export default function Home() {
  return (
    <div className="container">
      <h1 className="text-primary">Next.js + Bootstrap</h1>
    </div>
  );
}

💚 With Vue

Vue
// Install
npm install bootstrap

// Import in main.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

// Component Example
<template>
  <div class="container mt-5">
    <h1 class="text-primary">Vue + Bootstrap</h1>
    <button class="btn btn-success">Click Me</button>
  </div>
</template>

💼 Interview Questions (Hinglish)

Q1: Bootstrap 5 kya hai aur iska use kyun karte hain?
Answer: Bootstrap 5 ek CSS framework hai jo ready-made components provide karta hai. Iska use isliye karte hain kyunki development speed bahut fast ho jati hai, responsive design automatically mil jata hai, aur professional look milta hai bina zyada CSS likhe. Bootstrap 5 mein jQuery dependency remove kar di gayi hai, jo isse lightweight aur fast banata hai.
Q2: Bootstrap 4 aur Bootstrap 5 mein kya difference hai?
Answer: Bootstrap 5 mein jQuery dependency nahi hai (pure JavaScript use hota hai), Internet Explorer support remove kar diya, custom CSS properties add kiye, RTL support improve kiya, aur file size chota ho gaya. Naye utilities aur components bhi add kiye gaye jaise Offcanvas.
Q3: Bootstrap ko React/Vue ke saath kaise integrate karte hain?
Answer: NPM se bootstrap install karo (npm install bootstrap), phir main file mein CSS aur JS import karo. React mein className use karo (class ki jagah), aur useEffect mein JS import karo dynamic components ke liye. Vue mein main.js mein import karo aur template mein normal classes use karo.

🎯 Important Points

  • Bootstrap 5 is jQuery-free (uses vanilla JavaScript)
  • Mobile-first approach (design for mobile, then scale up)
  • Uses rem units instead of px for better accessibility
  • Supports CSS custom properties (CSS variables)
  • Dropped Internet Explorer support
  • Improved grid system with new xxl breakpoint
  • Better form controls and validation

📦 Containers

📖 What are Containers?

Simple Explanation: Containers are like boxes that hold your content and keep it centered on the page. They make sure your content doesn't stretch too wide on big screens! 📦

Proper Definition: Containers are the most basic layout element in Bootstrap that contain, pad, and align content within a given device or viewport. They provide responsive fixed-width or full-width containers.

💡 Types of Containers

  • .container - Responsive fixed-width container
  • .container-fluid - Full-width container (100% width)
  • .container-{breakpoint} - 100% width until breakpoint

🚀 How to Use

<!-- Fixed-width responsive container -->
<div class="container">
  <h1>Fixed Width Container</h1>
</div>

<!-- Full-width container -->
<div class="container-fluid">
  <h1>Full Width Container</h1>
</div>

<!-- Responsive containers -->
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
.container - Fixed width, responsive
.container-fluid - Full width (100%)

⚛️ With React

React
function Container() {
  return (
    <>
      <div className="container">
        <h1>Fixed Width Container</h1>
      </div>
      
      <div className="container-fluid">
        <h1>Full Width Container</h1>
      </div>
    </>
  );
}

▲ With Next.js

Next.js
export default function Page() {
  return (
    <div className="container">
      <h1>Next.js Container</h1>
      <p>Content goes here</p>
    </div>
  );
}

💚 With Vue

Vue
<template>
  <div class="container">
    <h1>Vue Container</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Content goes here'
    }
  }
}
</script>

💼 Interview Questions (Hinglish)

Q1: Container aur Container-fluid mein kya difference hai?
Answer: Container ek fixed-width responsive container hai jo different breakpoints pe different max-width leta hai (centered rahta hai). Container-fluid hamesha 100% width leta hai, chahe screen size kuch bhi ho. Container content ko centered rakhta hai, fluid full width use karta hai.
Q2: Container-md ka kya matlab hai?
Answer: Container-md ka matlab hai ki yeh container medium breakpoint (768px) tak 100% width rahega, uske baad fixed-width container ban jayega. Yeh responsive design ke liye useful hai jab aap chahte ho ki mobile aur tablet pe full width ho, lekin desktop pe centered ho.

🎯 Important Points

  • Containers provide padding (15px on each side by default)
  • Always use containers as the outermost wrapper
  • Don't nest containers inside containers
  • Container breakpoints: sm(540px), md(720px), lg(960px), xl(1140px), xxl(1320px)
  • Use container-fluid for full-width layouts

🎨 Grid System

📖 What is Grid System?

Simple Explanation: The grid system is like a chocolate bar divided into 12 pieces. You can take 1 piece, 6 pieces, or all 12 pieces to make your layout! 🍫

Proper Definition: Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive, allowing up to 12 columns across the page.

💡 Grid Breakpoints

  • xs - Extra small (<576px) - Mobile phones
  • sm - Small (≥576px) - Mobile landscape
  • md - Medium (≥768px) - Tablets
  • lg - Large (≥992px) - Desktops
  • xl - Extra large (≥1200px) - Large desktops
  • xxl - Extra extra large (≥1400px) - Larger desktops

🚀 How to Use

<div class="container">
  <!-- Basic Grid -->
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>

  <!-- Specific Width -->
  <div class="row">
    <div class="col-4">4 columns wide</div>
    <div class="col-8">8 columns wide</div>
  </div>

  <!-- Responsive Grid -->
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      Mobile: 12 cols, Tablet: 6 cols, Desktop: 4 cols
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      Responsive Column
    </div>
    <div class="col-12 col-md-12 col-lg-4">
      Responsive Column
    </div>
  </div>

  <!-- Offset Columns -->
  <div class="row">
    <div class="col-md-4 offset-md-4">Centered with offset</div>
  </div>
</div>
Col 1
Col 2
Col 3
col-4
col-8

⚛️ With React

React
function GridExample() {
  return (
    <div className="container">
      <div className="row">
        <div className="col-12 col-md-6 col-lg-4">
          <div className="card">
            <div className="card-body">
              <h5>Card 1</h5>
            </div>
          </div>
        </div>
        <div className="col-12 col-md-6 col-lg-4">
          <div className="card">
            <div className="card-body">
              <h5>Card 2</h5>
            </div>
          </div>
        </div>
        <div className="col-12 col-md-12 col-lg-4">
          <div className="card">
            <div className="card-body">
              <h5>Card 3</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

💼 Interview Questions (Hinglish)

Q1: Bootstrap grid system mein kitne columns hote hain?
Answer: Bootstrap grid system mein 12 columns hote hain. Aap in 12 columns ko kisi bhi tarah divide kar sakte ho - jaise 6+6, 4+4+4, 3+9, etc. Yeh 12-column system flexibility provide karta hai different layouts banane ke liye.
Q2: col-md-6 ka kya matlab hai?
Answer: col-md-6 ka matlab hai ki medium breakpoint (768px) aur usse bade screens pe yeh column 6 columns ki width lega (50% width). Chote screens pe yeh full width (12 columns) ho jayega automatically. 'md' medium breakpoint hai aur '6' columns ki number hai.
Q3: Row aur Column ka kya role hai?
Answer: Row ek wrapper hai jo columns ko hold karta hai aur negative margins use karke container ki padding ko cancel karta hai. Columns actual content hold karte hain aur row ke andar hi use hote hain. Bina row ke columns properly align nahi honge.

🎯 Important Points

  • Always use .row inside .container or .container-fluid
  • Columns must be immediate children of rows
  • Grid system is based on flexbox
  • Maximum 12 columns per row
  • Use .g-* classes for gutters (spacing between columns)
  • Mobile-first approach: design for mobile, then add larger breakpoints

✍️ Typography

📖 What is Typography?

Simple: Typography is all about text - making it big, small, bold, or colorful! 📝

Definition: Typography utilities control text styling including headings, paragraphs, font sizes, weights, alignment, and text transformations.

🚀 How to Use

<!-- Headings -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<!-- Display Headings (Larger) -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

<!-- Lead Paragraph -->
<p class="lead">This is a lead paragraph - stands out!</p>

<!-- Font Sizes -->
<p class="fs-1">Font size 1 (largest)</p>
<p class="fs-2">Font size 2</p>
<p class="fs-3">Font size 3</p>
<p class="fs-4">Font size 4</p>
<p class="fs-5">Font size 5</p>
<p class="fs-6">Font size 6 (smallest)</p>

<!-- Font Weight -->
<p class="fw-bold">Bold text</p>
<p class="fw-bolder">Bolder text</p>
<p class="fw-semibold">Semibold text</p>
<p class="fw-normal">Normal weight</p>
<p class="fw-light">Light weight</p>
<p class="fw-lighter">Lighter weight</p>

<!-- Font Style -->
<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal style</p>

<!-- Text Alignment -->
<p class="text-start">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-end">Right aligned</p>

<!-- Text Transform -->
<p class="text-lowercase">LOWERCASE TEXT</p>
<p class="text-uppercase">uppercase text</p>
<p class="text-capitalize">capitalize each word</p>

<!-- Text Decoration -->
<p class="text-decoration-underline">Underlined</p>
<p class="text-decoration-line-through">Strikethrough</p>
<p class="text-decoration-none">No decoration</p>

<!-- Line Height -->
<p class="lh-1">Line height 1</p>
<p class="lh-sm">Line height small</p>
<p class="lh-base">Line height base</p>
<p class="lh-lg">Line height large</p>

Heading 1

Heading 2

Heading 3

This is a lead paragraph that stands out from regular text.

Bold text example

Italic text example

uppercase text

Underlined text

⚛️ With React

React
function Typography() {
  return (
    <div>
      <h1 className="display-1">Large Display Heading</h1>
      <p className="lead">Lead paragraph text</p>
      <p className="fw-bold text-uppercase">Bold uppercase text</p>
      <p className="text-center text-muted">Centered muted text</p>
    </div>
  );
}

💼 Interview Questions (Hinglish)

Q1: Display headings aur normal headings mein kya difference hai?
Answer: Display headings (display-1 to display-6) normal headings se bade hote hain aur hero sections ya landing pages ke liye use hote hain. Yeh zyada attention grab karte hain. Normal headings (h1-h6) regular content hierarchy ke liye hain.
Q2: Lead paragraph ka kya use hai?
Answer: Lead paragraph (.lead class) introductory text ko highlight karne ke liye use hota hai. Yeh normal text se thoda bada aur prominent dikhta hai, usually article ya section ke start mein use hota hai.

🎯 Important Points

  • Use semantic HTML tags (h1-h6) for SEO
  • Display headings are larger than regular headings
  • Font sizes: fs-1 (largest) to fs-6 (smallest)
  • Use .lead for introductory paragraphs
  • Text utilities are responsive (text-start text-md-center)

🎨 Colors

📖 What are Bootstrap Colors?

Simple: Colors make your website pretty and help show what's important! 🌈

Definition: Bootstrap provides a comprehensive color system with semantic color classes for text, backgrounds, and borders.

🚀 How to Use

<!-- Text Colors -->
<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>
<p class="text-info">Info text</p>
<p class="text-light bg-dark">Light text</p>
<p class="text-dark">Dark text</p>
<p class="text-muted">Muted text</p>
<p class="text-white bg-dark">White text</p>

<!-- Background Colors -->
<div class="bg-primary text-white p-3">Primary background</div>
<div class="bg-secondary text-white p-3">Secondary background</div>
<div class="bg-success text-white p-3">Success background</div>
<div class="bg-danger text-white p-3">Danger background</div>
<div class="bg-warning text-dark p-3">Warning background</div>
<div class="bg-info text-dark p-3">Info background</div>
<div class="bg-light text-dark p-3">Light background</div>
<div class="bg-dark text-white p-3">Dark background</div>

<!-- Background Opacity -->
<div class="bg-primary bg-opacity-75 text-white p-3">75% opacity</div>
<div class="bg-primary bg-opacity-50 text-white p-3">50% opacity</div>
<div class="bg-primary bg-opacity-25 text-white p-3">25% opacity</div>
<div class="bg-primary bg-opacity-10 text-white p-3">10% opacity</div>

<!-- Border Colors -->
<div class="border border-primary p-3">Primary border</div>
<div class="border border-success p-3">Success border</div>
<div class="border border-danger p-3">Danger border</div>
Primary Secondary Success Danger Warning Info
Primary Background
Success Background
Primary Border

⚛️ With React

React
function ColorExample() {
  const [status, setStatus] = useState('success');
  
  return (
    <div>
      <div className={`alert alert-${status}`}>
        Status: {status}
      </div>
      <button 
        className="btn btn-primary me-2"
        onClick={() => setStatus('success')}
      >
        Success
      </button>
      <button 
        className="btn btn-danger"
        onClick={() => setStatus('danger')}
      >
        Danger
      </button>
    </div>
  );
}

💼 Interview Questions (Hinglish)

Q1: Semantic colors ka kya matlab hai?
Answer: Semantic colors ka matlab hai ki har color ka ek specific meaning hai - primary (main actions), success (positive), danger (errors/delete), warning (caution), info (information). Yeh colors user ko visual feedback dete hain bina text padhe.
Q2: bg-opacity classes kaise kaam karti hain?
Answer: bg-opacity classes background color ki transparency control karti hain. Values hain: 10, 25, 50, 75, 100. Example: bg-primary bg-opacity-50 se primary color 50% transparent ho jayega. Yeh overlays aur subtle backgrounds ke liye useful hai.

🎯 Important Points

  • Use semantic colors for consistent meaning
  • text-* for text colors, bg-* for backgrounds
  • bg-opacity-* for transparent backgrounds
  • Combine text and background colors carefully for contrast
  • Use text-white or text-dark with colored backgrounds

📊 Tables

📖 What are Bootstrap Tables?

Simple: Tables organize information in rows and columns, like a spreadsheet! 📋

Definition: Bootstrap tables provide styled, responsive tables with various options for striping, borders, hover states, and more.

🚀 How to Use

<!-- Basic Table -->
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>john@example.com</td>
    </tr>
  </tbody>
</table>

<!-- Striped Table -->
<table class="table table-striped">...</table>

<!-- Bordered Table -->
<table class="table table-bordered">...</table>

<!-- Borderless Table -->
<table class="table table-borderless">...</table>

<!-- Hoverable Table -->
<table class="table table-hover">...</table>

<!-- Small Table -->
<table class="table table-sm">...</table>

<!-- Dark Table -->
<table class="table table-dark">...</table>

<!-- Colored Rows -->
<tr class="table-primary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>

<!-- Responsive Table -->
<div class="table-responsive">
  <table class="table">...</table>
</div>
# Name Role Status
1 John Doe Developer Active
2 Jane Smith Designer Active
3 Bob Johnson Manager Pending

⚛️ With React

React
function UserTable() {
  const users = [
    { id: 1, name: 'John', email: 'john@example.com', status: 'Active' },
    { id: 2, name: 'Jane', email: 'jane@example.com', status: 'Inactive' }
  ];

  return (
    <table className="table table-striped table-hover">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        {users.map(user => (
          <tr key={user.id}>
            <td>{user.id}</td>
            <td>{user.name}</td>
            <td>{user.email}</td>
            <td>
              <span className={`badge bg-${user.status === 'Active' ? 'success' : 'secondary'}`}>
                {user.status}
              </span>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

💼 Interview Questions (Hinglish)

Q1: Table-responsive ka kya use hai?
Answer: table-responsive class table ko scrollable bana deti hai jab screen choti ho. Yeh table ko wrap karta hai ek div mein jo horizontal scroll provide karta hai mobile devices pe. Isse table ka layout break nahi hota aur user scroll karke sab columns dekh sakta hai.
Q2: Table-striped aur table-hover ka kya fayda hai?
Answer: table-striped alternate rows ko different color deta hai jo readability improve karta hai. table-hover rows pe hover effect add karta hai jo user ko current row identify karne mein help karta hai. Dono classes combined use kar sakte hain better UX ke liye.

🎯 Important Points

  • Always use .table class as base
  • Use .table-responsive for mobile-friendly tables
  • Combine classes: table table-striped table-hover
  • Use table-* classes for colored rows
  • thead can have table-dark or table-light

🖼️ Images

📖 What are Bootstrap Image Classes?

Simple: Image classes make pictures look nice and fit properly on your page! 📸

Definition: Bootstrap provides utility classes for styling images including responsive images, thumbnails, rounded corners, and alignment.

🚀 How to Use

<!-- Responsive Image (scales with parent) -->
<img src="image.jpg" class="img-fluid" alt="Responsive image">

<!-- Thumbnail -->
<img src="image.jpg" class="img-thumbnail" alt="Thumbnail">

<!-- Rounded Corners -->
<img src="image.jpg" class="rounded" alt="Rounded">
<img src="image.jpg" class="rounded-circle" alt="Circle">
<img src="image.jpg" class="rounded-pill" alt="Pill shape">

<!-- Float Images -->
<img src="image.jpg" class="float-start" alt="Float left">
<img src="image.jpg" class="float-end" alt="Float right">

<!-- Center Image -->
<img src="image.jpg" class="d-block mx-auto" alt="Centered">

<!-- Figure with Caption -->
<figure class="figure">
  <img src="image.jpg" class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the image.</figcaption>
</figure>

img-fluid

Responsive Image

Circle

rounded-circle

Thumbnail

img-thumbnail

⚛️ With React

React
function ImageGallery() {
  const images = [
    { id: 1, src: '/img1.jpg', alt: 'Image 1' },
    { id: 2, src: '/img2.jpg', alt: 'Image 2' },
    { id: 3, src: '/img3.jpg', alt: 'Image 3' }
  ];

  return (
    <div className="row">
      {images.map(img => (
        <div key={img.id} className="col-md-4 mb-3">
          <img 
            src={img.src} 
            alt={img.alt} 
            className="img-fluid rounded shadow"
          />
        </div>
      ))}
    </div>
  );
}

💼 Interview Questions (Hinglish)

Q1: img-fluid class kya karti hai?
Answer: img-fluid class image ko responsive banati hai. Yeh max-width: 100% aur height: auto set karti hai, jisse image apne parent container ke according scale ho jati hai aur kabhi overflow nahi hoti. Mobile-friendly images ke liye yeh essential hai.
Q2: rounded-circle aur rounded mein kya difference hai?
Answer: rounded class image ko slightly rounded corners deti hai (border-radius: 0.375rem). rounded-circle image ko perfect circle bana deti hai (border-radius: 50%), usually profile pictures ke liye use hoti hai. Circle ke liye image square honi chahiye.

🎯 Important Points

  • Always use img-fluid for responsive images
  • img-thumbnail adds border and padding
  • rounded-circle works best with square images
  • Use d-block mx-auto to center images
  • Combine with shadow classes for depth

⚠️ Alerts

📖 What are Alerts?

Simple: Alerts are colorful message boxes that tell you important information! 📢

Definition: Alerts provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.

🚀 How to Use

<!-- Basic Alerts -->
<div class="alert alert-primary" role="alert">
  Primary alert message
</div>
<div class="alert alert-secondary" role="alert">
  Secondary alert message
</div>
<div class="alert alert-success" role="alert">
  Success alert message
</div>
<div class="alert alert-danger" role="alert">
  Danger alert message
</div>
<div class="alert alert-warning" role="alert">
  Warning alert message
</div>
<div class="alert alert-info" role="alert">
  Info alert message
</div>

<!-- Alert with Heading -->
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>You successfully completed the task.</p>
</div>

<!-- Alert with Link -->
<div class="alert alert-primary" role="alert">
  A simple alert with <a href="#" class="alert-link">a link</a>.
</div>

<!-- Dismissible Alert -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Warning!</strong> This is a dismissible alert.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Alert with Icon -->
<div class="alert alert-success d-flex align-items-center" role="alert">
  <i class="bi bi-check-circle-fill me-2"></i>
  <div>Success message with icon</div>
</div>

⚛️ With React

React
function Alert({ type, message, onClose }) {
  return (
    <div className={`alert alert-${type} alert-dismissible fade show`} role="alert">
      {message}
      {onClose && (
        <button 
          type="button" 
          className="btn-close" 
          onClick={onClose}
        ></button>
      )}
    </div>
  );
}

// Usage
function App() {
  const [showAlert, setShowAlert] = useState(true);

  return (
    <div>
      {showAlert && (
        <Alert 
          type="success" 
          message="Operation successful!" 
          onClose={() => setShowAlert(false)}
        />
      )}
    </div>
  );
}

💼 Interview Questions (Hinglish)

Q1: Alert-dismissible kaise kaam karta hai?
Answer: alert-dismissible class alert mein close button add karti hai. Iske saath btn-close button aur data-bs-dismiss="alert" attribute use karna padta hai. Jab user close button click karta hai, Bootstrap automatically alert ko fade out karke remove kar deta hai.
Q2: Alert colors ka semantic meaning kya hai?
Answer: Success (green) - successful operations, Danger (red) - errors/critical issues, Warning (yellow) - caution/important info, Info (blue) - general information, Primary - main actions, Secondary - less important info. Yeh colors user ko instantly message ka importance samajh aata hai.

🎯 Important Points

  • Always include role="alert" for accessibility
  • Use alert-dismissible for closeable alerts
  • alert-link class for styled links inside alerts
  • Combine with icons for better visual communication
  • Use fade show classes for smooth animations

🔘 Buttons

📖 What are Bootstrap Buttons?

Simple Explanation: Buttons are like colorful clickable boxes that make things happen when you press them! 🎯

Proper Definition: Bootstrap provides predefined button styles with various colors, sizes, and states for different actions in web applications.

🚀 How to Use

<!-- Button Styles -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>

<!-- Outline Buttons -->
<button class="btn btn-outline-primary">Outline Primary</button>
<button class="btn btn-outline-success">Outline Success</button>

<!-- Button Sizes -->
<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-primary">Default Button</button>
<button class="btn btn-primary btn-sm">Small Button</button>

<!-- Block Button -->
<button class="btn btn-primary w-100">Block Button</button>

<!-- Disabled Button -->
<button class="btn btn-primary" disabled>Disabled</button>

⚛️ With React

React
function ButtonExample() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <div>
      <button className="btn btn-primary" onClick={handleClick}>
        Click Me
      </button>
      <button className="btn btn-success ms-2">
        Success Button
      </button>
    </div>
  );
}

💼 Interview Questions (Hinglish)

Q1: btn aur btn-primary dono classes kyun use karte hain?
Answer: 'btn' class basic button styling provide karti hai jaise padding, border-radius, font-size etc. 'btn-primary' color aur specific styling add karti hai. Dono classes zaruri hain - btn base styling ke liye aur btn-primary color theme ke liye.
Q2: Outline button kab use karte hain?
Answer: Outline buttons (btn-outline-*) tab use karte hain jab aap secondary actions dikhana chahte ho ya page pe zyada emphasis nahi dena chahte. Yeh lightweight dikhte hain aur primary buttons se kam attention attract karte hain. Good for cancel buttons ya less important actions.

🎯 Important Points

  • Always use .btn class as base, then add color class
  • Buttons work on <button>, <a>, and <input> elements
  • Use .active class to show pressed state
  • Use .disabled class or disabled attribute to disable
  • Button groups can combine multiple buttons

🃏 Cards

📖 What are Cards?

Simple Explanation: Cards are like small boxes that hold information - like trading cards or recipe cards! 🎴

Proper Definition: Cards are flexible and extensible content containers with multiple variants and options for headers, footers, images, and various content types.

🚀 How to Use

<!-- Basic Card -->
<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Card with Header and Footer -->
<div class="card">
  <div class="card-header">Featured</div>
  <div class="card-body">
    <h5 class="card-title">Special title</h5>
    <p class="card-text">Card content</p>
  </div>
  <div class="card-footer text-muted">2 days ago</div>
</div>

<!-- Colored Cards -->
<div class="card text-white bg-primary">
  <div class="card-body">
    <h5 class="card-title">Primary Card</h5>
    <p class="card-text">Content</p>
  </div>
</div>
Card Title

Some quick example text to build on the card.

Go somewhere
Success Card

Colored card example.

Featured
With Header

Card with header and footer.

⚛️ With React

React
function Card({ title, text, image }) {
  return (
    <div className="card" style={{ width: '18rem' }}>
      {image && <img src={image} className="card-img-top" alt={title} />}
      <div className="card-body">
        <h5 className="card-title">{title}</h5>
        <p className="card-text">{text}</p>
        <button className="btn btn-primary">Learn More</button>
      </div>
    </div>
  );
}

// Usage
<Card 
  title="React Card" 
  text="This is a reusable card component"
  image="/path/to/image.jpg"
/>

💼 Interview Questions (Hinglish)

Q1: Card component ka use kab karte hain?
Answer: Cards ka use tab karte hain jab aapko related information ko ek box mein group karke dikhana ho. Jaise product listings, blog posts, user profiles, dashboards etc. Cards content ko organized aur visually appealing banate hain.
Q2: Card-deck aur Card-group mein kya difference hai?
Answer: Bootstrap 5 mein card-deck aur card-group remove kar diye gaye hain. Ab hum grid system (row aur col classes) use karte hain cards ko layout karne ke liye. Yeh zyada flexible aur responsive hai.

🎯 Important Points

  • Cards have no fixed width by default
  • Use grid system to control card layout
  • card-img-top for images at top, card-img-bottom for bottom
  • Use .card-img-overlay for image overlays
  • Cards support various content types: text, lists, links, images

📝 Forms

📖 What are Bootstrap Forms?

Simple Explanation: Forms are like fill-in-the-blank papers where you type information! 📋

Proper Definition: Bootstrap provides extensive form controls with consistent styling across browsers, including inputs, textareas, selects, checkboxes, radios, and validation states.

🚀 How to Use

<form>
  <!-- Text Input -->
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com">
  </div>

  <!-- Password -->
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password">
  </div>

  <!-- Select -->
  <div class="mb-3">
    <label for="country" class="form-label">Country</label>
    <select class="form-select" id="country">
      <option selected>Choose...</option>
      <option value="1">USA</option>
      <option value="2">India</option>
    </select>
  </div>

  <!-- Textarea -->
  <div class="mb-3">
    <label for="message" class="form-label">Message</label>
    <textarea class="form-control" id="message" rows="3"></textarea>
  </div>

  <!-- Checkbox -->
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="check">
    <label class="form-check-label" for="check">Remember me</label>
  </div>

  <!-- Radio Buttons -->
  <div class="mb-3">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gender" id="male">
      <label class="form-check-label" for="male">Male</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gender" id="female">
      <label class="form-check-label" for="female">Female</label>
    </div>
  </div>

  <!-- File Input -->
  <div class="mb-3">
    <label for="file" class="form-label">Upload File</label>
    <input class="form-control" type="file" id="file">
  </div>

  <!-- Submit Button -->
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

⚛️ With React

React
function ContactForm() {
  const [formData, setFormData] = useState({
    email: '',
    message: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="mb-3">
        <label htmlFor="email" className="form-label">Email</label>
        <input 
          type="email" 
          className="form-control" 
          id="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </div>
      <div className="mb-3">
        <label htmlFor="message" className="form-label">Message</label>
        <textarea 
          className="form-control" 
          id="message"
          name="message"
          rows="3"
          value={formData.message}
          onChange={handleChange}
        ></textarea>
      </div>
      <button type="submit" className="btn btn-primary">Submit</button>
    </form>
  );
}

💼 Interview Questions (Hinglish)

Q1: form-control aur form-select mein kya difference hai?
Answer: form-control class input fields aur textarea ke liye use hoti hai, jabki form-select specifically select dropdown ke liye hai. Dono different styling provide karte hain jo unke element type ke according optimized hai.
Q2: Form validation Bootstrap mein kaise karte hain?
Answer: Bootstrap mein validation ke liye .was-validated class form pe add karo aur :valid/:invalid pseudo-classes automatically apply ho jayengi. Ya phir .is-valid aur .is-invalid classes manually add kar sakte ho specific fields pe. HTML5 validation attributes (required, pattern) bhi use kar sakte ho.

🎯 Important Points

  • Always use .form-control for text inputs
  • Use .form-label for labels
  • Add .mb-3 for spacing between form groups
  • Use .form-check for checkboxes and radios
  • Form validation classes: .is-valid, .is-invalid
  • Use .form-floating for floating labels

🍞 Toast

📖 What is a Toast?

Simple: Toasts are small notification pop-ups that appear briefly and then disappear! 🍞

Definition: Toasts are lightweight notifications designed to mimic push notifications. They're typically used for brief messages that don't require user interaction.

🚀 How to Use

<!-- Toast Container (usually fixed position) -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" role="alert" id="myToast">
    <div class="toast-header">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

<!-- Button to trigger toast -->
<button type="button" class="btn btn-primary" id="toastBtn">Show Toast</button>

<script>
// Initialize and show toast
const toastBtn = document.getElementById('toastBtn');
const myToast = document.getElementById('myToast');

toastBtn.addEventListener('click', () => {
  const toast = new bootstrap.Toast(myToast);
  toast.show();
});
</script>

<!-- Colored Toasts -->
<div class="toast align-items-center text-white bg-primary" role="alert">
  <div class="d-flex">
    <div class="toast-body">Primary toast</div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
  </div>
</div>

<!-- Auto-hide Toast -->
<div class="toast" data-bs-autohide="true" data-bs-delay="3000">
  <!-- Hides after 3 seconds -->
</div>

⚛️ With React

React
function ToastNotification() {
  const [show, setShow] = useState(false);

  return (
    <>
      <button 
        className="btn btn-primary" 
        onClick={() => setShow(true)}
      >
        Show Toast
      </button>

      <div className="toast-container position-fixed bottom-0 end-0 p-3">
        <div className={`toast ${show ? 'show' : ''}`} role="alert">
          <div className="toast-header">
            <strong className="me-auto">Notification</strong>
            <small>Just now</small>
            <button 
              type="button" 
              className="btn-close" 
              onClick={() => setShow(false)}
            ></button>
          </div>
          <div className="toast-body">
            Your action was successful!
          </div>
        </div>
      </div>
    </>
  );
}

💼 Interview Questions (Hinglish)

Q1: Toast aur Alert mein kya difference hai?
Answer: Toast temporary notification hai jo automatically hide ho jata hai aur screen ke corner mein dikhta hai. Alert permanent message hai jo page content mein inline dikhta hai aur user manually close karta hai. Toast non-intrusive hai, Alert zyada prominent hai.
Q2: Toast ko programmatically kaise show/hide karte hain?
Answer: JavaScript mein: const toast = new bootstrap.Toast(element); toast.show(); ya toast.hide(); use karo. React mein state use karke show class toggle karo. data-bs-autohide="true" se automatic hide hota hai specified delay ke baad.

🎯 Important Points

  • Toasts must be initialized with JavaScript
  • Use toast-container for positioning
  • data-bs-autohide controls auto-dismiss
  • data-bs-delay sets display duration
  • Stack multiple toasts in container

📱 Offcanvas

📖 What is Offcanvas?

Simple: Offcanvas is a sidebar that slides in from the side of the screen! 📱

Definition: Offcanvas is a sidebar component that can be toggled to appear from the left, right, top, or bottom edge of the viewport.

🚀 How to Use

<!-- Button trigger -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
  Open Offcanvas
</button>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas Title</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Content goes here...</p>
  </div>
</div>

<!-- Positions -->
<div class="offcanvas offcanvas-start">From left</div>
<div class="offcanvas offcanvas-end">From right</div>
<div class="offcanvas offcanvas-top">From top</div>
<div class="offcanvas offcanvas-bottom">From bottom</div>

<!-- With Backdrop -->
<div class="offcanvas" data-bs-backdrop="true">With backdrop</div>
<div class="offcanvas" data-bs-backdrop="static">Static backdrop</div>
<div class="offcanvas" data-bs-backdrop="false">No backdrop</div>
Demo Offcanvas

This is an offcanvas sidebar!

You can put any content here:

  • Navigation links
  • Forms
  • User profile
  • Settings

⚛️ With React

React
function OffcanvasMenu() {
  const [show, setShow] = useState(false);

  return (
    <>
      <button 
        className="btn btn-primary" 
        onClick={() => setShow(true)}
      >
        Open Menu
      </button>

      <div className={`offcanvas offcanvas-start ${show ? 'show' : ''}`} tabIndex="-1">
        <div className="offcanvas-header">
          <h5 className="offcanvas-title">Menu</h5>
          <button 
            type="button" 
            className="btn-close" 
            onClick={() => setShow(false)}
          ></button>
        </div>
        <div className="offcanvas-body">
          <nav>
            <a href="#" className="d-block mb-2">Home</a>
            <a href="#" className="d-block mb-2">About</a>
            <a href="#" className="d-block mb-2">Contact</a>
          </nav>
        </div>
      </div>
      
      {show && <div className="offcanvas-backdrop show" onClick={() => setShow(false)}></div>}
    </>
  );
}

💼 Interview Questions (Hinglish)

Q1: Offcanvas ka main use case kya hai?
Answer: Offcanvas mobile navigation menus, filters, shopping carts, user profiles, aur settings panels ke liye use hota hai. Yeh screen space save karta hai aur mobile-first design ke liye perfect hai. Desktop pe bhi side panels ke liye useful hai.
Q2: Offcanvas aur Modal mein kya difference hai?
Answer: Offcanvas screen ke edge se slide karta hai (left/right/top/bottom), Modal center mein appear hota hai. Offcanvas navigation aur menus ke liye better hai, Modal important actions aur forms ke liye. Offcanvas zyada mobile-friendly hai.

🎯 Important Points

  • New in Bootstrap 5 (replaces old sidebar patterns)
  • Four positions: start, end, top, bottom
  • Use data-bs-toggle="offcanvas" to trigger
  • Backdrop can be static, true, or false
  • Perfect for mobile navigation menus

📐 Flexbox Utilities

📖 What is Flexbox?

Simple: Flexbox helps arrange items in rows or columns easily! 📦

Definition: Flexbox utilities provide quick layout options for alignment, direction, wrapping, and spacing of flex items.

🚀 How to Use

<!-- Enable Flexbox -->
<div class="d-flex">Flex container</div>
<div class="d-inline-flex">Inline flex</div>

<!-- Direction -->
<div class="d-flex flex-row">Horizontal (default)</div>
<div class="d-flex flex-row-reverse">Horizontal reversed</div>
<div class="d-flex flex-column">Vertical</div>
<div class="d-flex flex-column-reverse">Vertical reversed</div>

<!-- Justify Content (horizontal alignment) -->
<div class="d-flex justify-content-start">Start</div>
<div class="d-flex justify-content-end">End</div>
<div class="d-flex justify-content-center">Center</div>
<div class="d-flex justify-content-between">Space between</div>
<div class="d-flex justify-content-around">Space around</div>
<div class="d-flex justify-content-evenly">Space evenly</div>

<!-- Align Items (vertical alignment) -->
<div class="d-flex align-items-start">Top</div>
<div class="d-flex align-items-end">Bottom</div>
<div class="d-flex align-items-center">Center</div>
<div class="d-flex align-items-baseline">Baseline</div>
<div class="d-flex align-items-stretch">Stretch</div>

<!-- Wrap -->
<div class="d-flex flex-wrap">Wrap</div>
<div class="d-flex flex-nowrap">No wrap</div>
<div class="d-flex flex-wrap-reverse">Wrap reverse</div>

<!-- Gap -->
<div class="d-flex gap-2">Gap 2</div>
<div class="d-flex gap-3">Gap 3</div>

<!-- Flex Item Properties -->
<div class="flex-fill">Fill available space</div>
<div class="flex-grow-1">Grow</div>
<div class="flex-shrink-1">Shrink</div>

<!-- Order -->
<div class="order-1">Second</div>
<div class="order-0">First</div>
justify-content-between:
Item 1
Item 2
Item 3
align-items-center:
Centered
Items
gap-3:
Gap
Between
Items

⚛️ With React

React
function FlexLayout() {
  return (
    <div className="d-flex justify-content-between align-items-center p-3 bg-light">
      <div>Logo</div>
      <nav className="d-flex gap-3">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
      <button className="btn btn-primary">Login</button>
    </div>
  );
}

💼 Interview Questions (Hinglish)

Q1: justify-content aur align-items mein kya difference hai?
Answer: justify-content main axis (default mein horizontal) pe items ko align karta hai - start, end, center, between, around. align-items cross axis (default mein vertical) pe align karta hai - start, end, center, baseline, stretch. Dono saath use karke perfect centering achieve kar sakte ho.
Q2: flex-grow aur flex-shrink ka kya use hai?
Answer: flex-grow-1 item ko available space mein grow karne deta hai. flex-shrink-1 item ko shrink hone deta hai jab space kam ho. flex-fill sabhi items ko equally grow karta hai. Yeh responsive layouts ke liye bahut useful hai.

🎯 Important Points

  • d-flex enables flexbox on container
  • justify-content for horizontal alignment
  • align-items for vertical alignment
  • gap-* for spacing between flex items
  • Responsive: d-flex d-md-block

🛠️ Utilities

📖 What are Utilities?

Simple Explanation: Utilities are like magic shortcuts that let you style things quickly without writing CSS! ✨

Proper Definition: Utility classes are single-purpose helper classes that apply specific CSS properties, enabling rapid styling without custom CSS.

🚀 Common Utilities

<!-- Spacing (Margin & Padding) -->
<div class="m-3">Margin all sides</div>
<div class="mt-3">Margin top</div>
<div class="mb-3">Margin bottom</div>
<div class="ms-3">Margin start (left)</div>
<div class="me-3">Margin end (right)</div>
<div class="mx-3">Margin horizontal</div>
<div class="my-3">Margin vertical</div>

<div class="p-3">Padding all sides</div>
<div class="pt-3">Padding top</div>

<!-- Display -->
<div class="d-none">Hidden</div>
<div class="d-block">Block</div>
<div class="d-flex">Flex</div>
<div class="d-inline">Inline</div>

<!-- Text Alignment -->
<div class="text-start">Left aligned</div>
<div class="text-center">Center aligned</div>
<div class="text-end">Right aligned</div>

<!-- Text Transform -->
<div class="text-lowercase">LOWERCASE</div>
<div class="text-uppercase">uppercase</div>
<div class="text-capitalize">capitalize each word</div>

<!-- Font Weight -->
<div class="fw-bold">Bold</div>
<div class="fw-normal">Normal</div>
<div class="fw-light">Light</div>

<!-- Colors -->
<div class="text-primary">Primary text</div>
<div class="bg-success">Success background</div>

<!-- Border -->
<div class="border">Border all sides</div>
<div class="border-top">Border top</div>
<div class="rounded">Rounded corners</div>
<div class="rounded-circle">Circle</div>

<!-- Shadow -->
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Regular shadow</div>
<div class="shadow-lg">Large shadow</div>

<!-- Width & Height -->
<div class="w-25">Width 25%</div>
<div class="w-50">Width 50%</div>
<div class="w-100">Width 100%</div>
<div class="h-100">Height 100%</div>
Primary Success Danger
Padding, border, and rounded corners
Centered, bold, primary text

💼 Interview Questions (Hinglish)

Q1: m-3 aur p-3 mein kya difference hai?
Answer: m-3 margin add karta hai (element ke bahar ki space), jabki p-3 padding add karta hai (element ke andar ki space). Number (0-5) spacing ki size represent karta hai. m-0 = 0, m-1 = 0.25rem, m-2 = 0.5rem, m-3 = 1rem, m-4 = 1.5rem, m-5 = 3rem.
Q2: Responsive utilities kaise use karte hain?
Answer: Breakpoint prefix add karke: d-none d-md-block (mobile pe hidden, tablet+ pe visible). Format: {property}-{breakpoint}-{value}. Example: text-center text-md-start (mobile pe center, tablet+ pe left aligned).

🎯 Important Points

  • Utilities follow pattern: {property}-{value}
  • Responsive: {property}-{breakpoint}-{value}
  • Spacing scale: 0, 1, 2, 3, 4, 5 (0 to 3rem)
  • Use utilities instead of custom CSS when possible
  • Combine multiple utilities for complex styling

🌙 Dark Mode

📖 What is Dark Mode?

Simple Explanation: Dark mode makes your website look dark instead of bright - easier on the eyes at night! 🌙

Proper Definition: Dark mode is a color scheme that uses light-colored text and UI elements on dark backgrounds, reducing eye strain in low-light conditions.

🚀 How to Use

<!-- Enable dark mode with data-bs-theme -->
<html data-bs-theme="dark">

<!-- Or on specific elements -->
<div data-bs-theme="dark">
  <div class="card">
    <div class="card-body">
      This card is in dark mode
    </div>
  </div>
</div>

<!-- Toggle dark mode with JavaScript -->
<button onclick="toggleDarkMode()">Toggle Dark Mode</button>

<script>
function toggleDarkMode() {
  const html = document.documentElement;
  const currentTheme = html.getAttribute('data-bs-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  html.setAttribute('data-bs-theme', newTheme);
}
</script>

<!-- Dark mode specific colors -->
<div class="bg-dark text-white">Dark background</div>
<div class="bg-light text-dark">Light background</div>

⚛️ With React

React
import { useState, useEffect } from 'react';

function DarkModeToggle() {
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    document.documentElement.setAttribute(
      'data-bs-theme',
      darkMode ? 'dark' : 'light'
    );
  }, [darkMode]);

  return (
    <button 
      className="btn btn-primary" 
      onClick={() => setDarkMode(!darkMode)}
    >
      {darkMode ? '☀️ Light Mode' : '🌙 Dark Mode'}
    </button>
  );
}

💼 Interview Questions (Hinglish)

Q1: Bootstrap 5 mein dark mode kaise implement karte hain?
Answer: Bootstrap 5.3+ mein data-bs-theme="dark" attribute use karte hain. Yeh html tag pe ya kisi bhi specific element pe add kar sakte ho. JavaScript se toggle karne ke liye setAttribute use karo. Yeh automatic color scheme apply kar deta hai sabhi Bootstrap components pe.
Q2: User ki system preference ke according dark mode kaise set kare?
Answer: CSS media query prefers-color-scheme use karo ya JavaScript mein window.matchMedia('(prefers-color-scheme: dark)') check karo. User ki system setting detect karke automatically dark/light mode set kar sakte ho.

🎯 Important Points

  • Bootstrap 5.3+ has built-in dark mode support
  • Use data-bs-theme="dark" or "light"
  • Can be applied globally or to specific components
  • Automatically adjusts all Bootstrap components
  • Store user preference in localStorage