🎯 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)
🎯 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>
⚛️ With React
Reactfunction 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.jsexport 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)
🎯 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>
⚛️ With React
Reactfunction 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)
🎯 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
Reactfunction 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)
🎯 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>
⚛️ With React
Reactfunction 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)
🎯 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
Reactfunction 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)
🎯 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
Reactfunction 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)
🎯 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
Reactfunction 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)
🎯 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
Reactfunction 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)
🎯 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>
Success Card
Colored card example.
With Header
Card with header and footer.
⚛️ With React
Reactfunction 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)
🎯 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
Reactfunction 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)
🎯 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
🪟 Modal
📖 What is a Modal?
Simple Explanation: A modal is like a pop-up window that appears on top of your page to show important information! 🪟
Proper Definition: Modals are dialog boxes/popup windows that are displayed on top of the current page, typically used for user notifications, forms, or important information that requires user attention.
🚀 How to Use
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch Modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
Modal body content goes here...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Sizes -->
<div class="modal-dialog modal-sm">Small</div>
<div class="modal-dialog">Default</div>
<div class="modal-dialog modal-lg">Large</div>
<div class="modal-dialog modal-xl">Extra Large</div>
<!-- Centered -->
<div class="modal-dialog modal-dialog-centered">Centered</div>
<!-- Scrollable -->
<div class="modal-dialog modal-dialog-scrollable">Scrollable</div>
⚛️ With React
Reactimport { useState } from 'react';
function ModalExample() {
const [show, setShow] = useState(false);
return (
<>
<button
className="btn btn-primary"
onClick={() => setShow(true)}
>
Open Modal
</button>
{show && (
<div className="modal show d-block" tabIndex="-1">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">React Modal</h5>
<button
type="button"
className="btn-close"
onClick={() => setShow(false)}
></button>
</div>
<div className="modal-body">
Modal content here
</div>
<div className="modal-footer">
<button
className="btn btn-secondary"
onClick={() => setShow(false)}
>
Close
</button>
</div>
</div>
</div>
</div>
)}
{show && <div className="modal-backdrop show"></div>}
</>
);
}
💼 Interview Questions (Hinglish)
🎯 Important Points
- Modals are hidden by default (display: none)
- Use data-bs-toggle="modal" to trigger
- Press ESC key to close modal
- Click outside (backdrop) to close
- Use .modal-dialog-centered for vertical centering
- Multiple modals not supported by default
🎠 Carousel
📖 What is a Carousel?
Simple: A carousel is like a slideshow that shows pictures one by one! 🎠
Definition: A carousel is a slideshow component for cycling through elements (images or slides of text) like a carousel.
🚀 How to Use
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2"></button>
</div>
<!-- Slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
<div class="carousel-caption d-none d-md-block">
<h5>First slide</h5>
<p>Description for first slide</p>
</div>
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="slide3.jpg" class="d-block w-100" alt="Slide 3">
</div>
</div>
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Auto-playing Carousel -->
<div class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
<!-- Slides every 3 seconds -->
</div>
⚛️ With React
Reactfunction Carousel({ slides }) {
return (
<div id="myCarousel" className="carousel slide" data-bs-ride="carousel">
<div className="carousel-inner">
{slides.map((slide, index) => (
<div
key={index}
className={`carousel-item ${index === 0 ? 'active' : ''}`}
>
<img src={slide.image} className="d-block w-100" alt={slide.title} />
<div className="carousel-caption">
<h5>{slide.title}</h5>
<p>{slide.description}</p>
</div>
</div>
))}
</div>
<button className="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span className="carousel-control-prev-icon"></span>
</button>
<button className="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span className="carousel-control-next-icon"></span>
</button>
</div>
);
}
💼 Interview Questions (Hinglish)
🎯 Important Points
- First carousel-item must have .active class
- Use data-bs-ride="carousel" for auto-play
- carousel-caption for text overlays
- Indicators show current slide position
- Use data-bs-interval to control slide duration
🍞 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
Reactfunction 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)
🎯 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
Reactfunction 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)
🎯 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:
align-items-center:
gap-3:
⚛️ With React
Reactfunction 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)
🎯 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>
💼 Interview Questions (Hinglish)
🎯 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
Reactimport { 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)
🎯 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