Day 18: Frameworks: Bootstrap & Tailwind Explained
✅ Today you will learn
- What a CSS framework is and why companies use them
- Bootstrap 5: grid, components, utilities
- Tailwind CSS: utility-first styling
- Bootstrap vs Tailwind vs your own CSS
- Customising frameworks and what interviewers expect
🏢 In the real world
Indian job descriptions often say “Bootstrap/Tailwind required”. Many admin panels, school ERPs and SaaS dashboards in the market are built on Bootstrap; most new React/Next.js startups use Tailwind. Because you now understand real CSS, learning either takes hours, not weeks – and you can fix things when the framework is not enough.
What a framework gives you
Bootstrap 5 – components first
<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 you already know |
|---|---|
| container | max-width + margin: 0 auto + padding (Day 4) |
| row / col-12 col-sm-6 | Flexbox with wrap + media query at 576px (Days 7, 11) |
| g-3 | gap between columns |
| card, card-body | Box with border, radius, padding (Day 4) |
| d-flex flex-column … mt-auto | The equal-height button trick (Day 8) |
| btn btn-primary | Your .btn .btn--primary component (Day 16) |
| text-secondary, shadow-sm | Utilities: colour and box-shadow |
Bootstrap 5.3 exposes CSS variables. Instead of overriding .btn-primary with !important, set them: .btn-primary { --bs-btn-bg: #e34f26; --bs-btn-border-color: #e34f26; --bs-btn-hover-bg: #c2410c; }. Link your own style.css AFTER bootstrap.css.
Tailwind CSS – utility first
<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 it generates |
|---|---|
| p-4 | padding: 1rem |
| rounded-2xl | border-radius: 1rem |
| grid gap-4 sm:grid-cols-2 | display: grid; gap: 1rem; 2 columns from 640px (mobile-first!) |
| flex flex-col flex-1 mt-auto | Flexbox column + push to bottom |
| aspect-[4/3] object-cover | aspect-ratio and object-fit (arbitrary value in brackets) |
| hover:bg-indigo-700 | Background on :hover |
| bg-gradient-to-br from-… to-… | linear-gradient(to bottom right, …) |
The <script> version compiles CSS inside the visitor’s browser – fine for practice, too slow for real sites. In projects install Tailwind with npm (or the Vite/Next.js plugin) so it outputs a small, purged CSS file containing only the classes you used.
Bootstrap vs Tailwind vs hand-written CSS
| Bootstrap | Tailwind | Your own CSS | |
|---|---|---|---|
| Style | Ready components | Utility classes in HTML | Semantic classes (BEM) |
| Looks | Recognisably “Bootstrap” unless customised | Fully custom | Fully custom |
| Speed to first screen | ⚡ Fastest | Fast after learning names | Slowest at start |
| CSS file size | ~230 KB full (can trim) | Very small after build | Exactly what you write |
| Best for | Admin panels, ERPs, prototypes, PHP sites | React/Next.js apps, custom designs | Brand websites, learning, small sites |
| Needs JavaScript? | Only for dropdowns/modals (bundle) | No | No |
Master plain CSS first (you just did 17 days of it). Then learn Bootstrap in 2–3 days for PHP/admin jobs and Tailwind in 3–4 days for React/Next.js jobs. In interviews, explaining what a framework class does in real CSS is what impresses.
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 unlocked today
Practice tasks
🏋️ Practice – do it yourself
Quick quiz
🧠 Quick Quiz – test yourself
Interview corner
💼 Interview Corner
Bootstrap or Tailwind – which would you choose and why?
It depends on the project: Bootstrap for fast, consistent admin panels or server-rendered PHP apps where ready components save time; Tailwind for custom-designed products, especially React/Next.js, where utility classes and a small built CSS keep design flexible. Plain CSS for small brand sites.
What are the downsides of utility-first CSS?
Long class lists in HTML, a learning curve for class names, repetition unless you extract components, and designs can drift without a shared component layer. Mitigate with components (React, partials) and the config/theme.
Summary
- Frameworks = ready components, grids and utilities.
- Bootstrap: component classes, great for admin/PHP apps; customise via --bs-* variables.
- Tailwind: utility classes, mobile-first prefixes, needs a build step in production.
- Know the plain CSS behind every class.
Day 19 – Mini project: a fully responsive coaching-institute landing page from scratch, explained section by section.
