दिन 18: Frameworks: Bootstrap और Tailwind
✅ आज आप सीखेंगे
- CSS framework क्या है और companies क्यों लेती हैं
- Bootstrap 5: grid, components, utilities
- Tailwind CSS: utility-first styling
- Bootstrap बनाम Tailwind बनाम अपनी CSS
- Frameworks customise करना और interviewers क्या चाहते हैं
🏢 असली दुनिया में
Indian job descriptions में अक्सर लिखा होता है “Bootstrap/Tailwind required”। बाज़ार के कई admin panels, school ERPs और SaaS dashboards Bootstrap पर बने हैं; ज़्यादातर नए React/Next.js startups Tailwind लेते हैं। अब आप असली CSS समझते हैं, इसलिए दोनों में से कोई भी सीखना हफ़्तों नहीं, घंटों का काम है – और framework कम पड़े तो आप चीज़ें ठीक कर सकते हैं।
Framework क्या देता है
Bootstrap 5 – पहले components
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<div class="container py-3">
<div class="row g-3">
<div class="col-12 col-sm-6">
<div class="card shadow-sm h-100">
<img src="images/kaju-katli-400.webp" class="card-img-top" alt="Kaju katli">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Kaju Katli <span class="badge text-bg-success">Veg</span></h5>
<p class="card-text text-secondary">Cashew fudge with silver vark.</p>
<a href="#" class="btn btn-primary mt-auto">Add to cart – ₹900</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="alert alert-warning mb-3">🪔 Diwali orders close on 30 Oct</div>
<form class="vstack gap-2">
<input class="form-control" placeholder="Mobile number">
<select class="form-select"><option>Kaju katli</option><option>Ghewar</option></select>
<button class="btn btn-outline-primary">Request call back</button>
</form>
</div>
</div>
</div>| Bootstrap class | आप जो plain CSS जानते हैं |
|---|---|
| container | max-width + margin: 0 auto + padding (Day 4) |
| row / col-12 col-sm-6 | 576px पर media query के साथ wrap वाला Flexbox (Days 7, 11) |
| g-3 | Columns के बीच gap |
| card, card-body | Border, radius, padding वाला box (Day 4) |
| d-flex flex-column … mt-auto | बराबर-ऊँचाई button trick (Day 8) |
| btn btn-primary | आपका .btn .btn--primary component (Day 16) |
| text-secondary, shadow-sm | Utilities: colour और box-shadow |
Bootstrap 5.3 CSS variables देता है। .btn-primary को !important से override करने की जगह उन्हें set करें: .btn-primary { --bs-btn-bg: #e34f26; --bs-btn-border-color: #e34f26; --bs-btn-hover-bg: #c2410c; }। अपनी style.css को bootstrap.css के बाद link करें।
Tailwind CSS – पहले utilities
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="p-4 grid gap-4 sm:grid-cols-2">
<article class="bg-white rounded-2xl shadow-md overflow-hidden flex flex-col">
<img src="images/ghewar-400.webp" alt="Ghewar" class="w-full aspect-[4/3] object-cover">
<div class="p-4 flex flex-col flex-1">
<h3 class="text-lg font-bold">Malai Ghewar
<span class="ml-1 rounded-full bg-amber-100 text-amber-800 text-xs px-2 py-0.5">Teej special</span></h3>
<p class="text-slate-500 text-sm mb-4">Honeycomb disc with rabri.</p>
<a href="#" class="mt-auto text-center rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2">
Add to cart – ₹650</a>
</div>
</article>
<div class="rounded-2xl bg-gradient-to-br from-indigo-600 to-cyan-500 text-white p-6 flex flex-col justify-center">
<p class="uppercase tracking-widest text-xs opacity-80">Free delivery</p>
<p class="text-3xl font-extrabold leading-tight">On orders above ₹1,500</p>
</div>
</div>| Tailwind class | बनने वाली CSS |
|---|---|
| p-4 | padding: 1rem |
| rounded-2xl | border-radius: 1rem |
| grid gap-4 sm:grid-cols-2 | display: grid; gap: 1rem; 640px से 2 columns (mobile-first!) |
| flex flex-col flex-1 mt-auto | Flexbox column + नीचे धकेलना |
| aspect-[4/3] object-cover | aspect-ratio और object-fit (brackets में मनचाही value) |
| hover:bg-indigo-700 | :hover पर background |
| bg-gradient-to-br from-… to-… | linear-gradient(to bottom right, …) |
<script> version visitor के browser के अंदर CSS बनाता है – अभ्यास के लिए ठीक, असली sites के लिए धीमा। Projects में Tailwind npm (या Vite/Next.js plugin) से install करें ताकि वह सिर्फ़ इस्तेमाल हुई classes वाली छोटी CSS file बनाए।
Bootstrap बनाम Tailwind बनाम hand-written CSS
| Bootstrap | Tailwind | अपनी CSS | |
|---|---|---|---|
| शैली | तैयार components | HTML में utility classes | Semantic classes (BEM) |
| रूप | Customise न करें तो “Bootstrap” जैसा | पूरी तरह custom | पूरी तरह custom |
| पहली screen तक गति | ⚡ सबसे तेज़ | नाम सीखने के बाद तेज़ | शुरू में सबसे धीमा |
| CSS file size | ~230 KB पूरा (छोटा कर सकते हैं) | Build के बाद बहुत छोटा | जितना आप लिखें |
| किसके लिए | Admin panels, ERPs, prototypes, PHP sites | React/Next.js apps, custom designs | Brand websites, सीखना, छोटी sites |
| JavaScript चाहिए? | सिर्फ़ dropdowns/modals के लिए (bundle) | नहीं | नहीं |
पहले plain CSS में महारत (आपने अभी 17 दिन यही किया)। फिर PHP/admin jobs के लिए 2–3 दिन में Bootstrap और React/Next.js jobs के लिए 3–4 दिन में Tailwind। Interviews में framework class असली CSS में क्या करती है, यह समझाना प्रभावित करता है।
npm create vite@latest my-site -- --template vanilla cd my-site npm install tailwindcss @tailwindcss/vite # vite.config.js → plugins: [tailwindcss()] # src/style.css → @import "tailwindcss"; npm run dev
🏅 आज के Job Skills
Practice tasks
🏋️ Practice – ख़ुद करें
Quick quiz
🧠 Quick Quiz – ख़ुद को जाँचें
Interview corner
💼 Interview Corner
Bootstrap या Tailwind – कौन और क्यों?
Project पर निर्भर: तेज़, एक-जैसे admin panels या server-rendered PHP apps के लिए Bootstrap जहाँ तैयार components समय बचाते हैं; custom-designed products के लिए Tailwind, ख़ासकर React/Next.js, जहाँ utility classes और छोटी built CSS design flexible रखती है। छोटी brand sites के लिए plain CSS।
Utility-first CSS के नुक़सान?
HTML में लंबी class lists, class names सीखने का समय, components न बनाएँ तो दोहराव, और साझा component layer के बिना designs भटक सकते हैं। Components (React, partials) और config/theme से कम करें।
सारांश
- Frameworks = तैयार components, grids और utilities।
- Bootstrap: component classes, admin/PHP apps के लिए बढ़िया; --bs-* variables से customise।
- Tailwind: utility classes, mobile-first prefixes, production में build step चाहिए।
- हर class के पीछे की plain CSS जानें।
Day 19 – Mini project: शून्य से पूरी तरह responsive coaching-institute landing page, section-दर-section।
