By the end of this lesson, you will:
Welcome to Bootstrap! After experiencing Tailwind's utility-first approach, let's explore Bootstrap's component-based philosophy. This lesson will help you understand both frameworks and make informed choices about which to use for different projects.
:information_source: Info Bootstrap is the world's most popular component-based CSS framework for building responsive, mobile-first projects. Instead of utility classes, Bootstrap provides pre-designed components that you can use immediately.
Bootstrap gives you ready-to-use components with predefined styles:
<div class="container">
<div class="jumbotron bg-primary text-white text-center py-5 mb-4">
<h1 class="display-4">Welcome</h1>
<button class="btn btn-light btn-lg">Get Started</button>
</div>
</div>
<div class="max-w-6xl mx-auto">
<div class="bg-blue-500 text-white text-center py-12 mb-8 rounded">
<h1 class="text-5xl font-bold">Welcome</h1>
<button class="bg-white text-blue-500 text-lg py-3 px-6 rounded hover:bg-gray-100">
Get Started
</button>
</div>
</div>
Bootstrap was created at Twitter to solve inconsistent interfaces. Here's what it offers:
Bootstrap is perfect for beginners:
btn, card, navbar):bulb: Tip Even without customization, Bootstrap sites look professional and modern. This makes it perfect for quickly building prototypes or MVPs (Minimum Viable Products).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap Demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
npm install bootstrap
# or
yarn add bootstrap
:memo: Note For learning, we recommend starting with the CDN method. It's the fastest way to get started!
Bootstrap's grid uses a 12-column system. Think of it like dividing your page into 12 equal parts!
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="bg-primary text-white p-3">Column 1</div>
</div>
<div class="col-md-4">
<div class="bg-secondary text-white p-3">Column 2</div>
</div>
<div class="col-md-4">
<div class="bg-success text-white p-3">Column 3</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-lg-4">
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Responsive Card</h5>
<p class="card-text">This layout adapts to screen size</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Responsive Card</h5>
<p class="card-text">This layout adapts to screen size</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Responsive Card</h5>
<p class="card-text">This layout adapts to screen size</p>
</div>
</div>
</div>
</div>
</div>
Bootstrap adjusts layouts for different screen sizes:
col- - Extra small devices (phones, <576px)col-sm- - Small devices (landscape phones, >=576px)col-md- - Medium devices (tablets, >=768px)col-lg- - Large devices (desktops, >=992px)col-xl- - X-Large devices (large desktops, >=1200px)col-xxl- - XX-Large devices (larger desktops, >=1400px)<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-primary btn-lg">Large button</button>
<button class="btn btn-secondary">Regular button</button>
<button class="btn btn-success btn-sm">Small button</button>
<button class="btn btn-primary" disabled>Disabled</button>
<button class="btn btn-outline-primary">Outline</button>
Example:
<div class="card" style="width: 18rem;">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="Card image" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">2 days ago</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<form>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email.</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="remember">
<label class="form-check-label" for="remember">Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" required>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Please provide a valid first name.</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>You successfully read this important alert message.</p>
<hr>
<p class="mb-0">Be sure to use margin utilities to keep things tidy.</p>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Let's build the same product card using both frameworks to see the difference!
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/300/200?random=1" class="card-img-top" alt="Product" style="height: 200px; object-fit: cover;" />
<div class="card-body d-flex flex-column">
<h5 class="card-title">Premium Headphones</h5>
<p class="text-primary fw-bold fs-5 mb-2">$129.99</p>
<p class="card-text text-muted flex-grow-1">High-quality wireless headphones with noise cancellation.</p>
<button class="btn btn-primary mt-auto">Add to Cart</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm h-full flex flex-col overflow-hidden">
<img src="https://picsum.photos/300/200?random=1" alt="Product" class="w-full h-48 object-cover" />
<div class="p-5 flex flex-col flex-grow">
<h3 class="text-xl font-semibold text-gray-900 mb-2">Premium Headphones</h3>
<p class="text-lg font-bold text-blue-600 mb-2">$129.99</p>
<p class="text-gray-600 text-sm flex-grow mb-4">High-quality wireless headphones with noise cancellation.</p>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded transition-colors">
Add to Cart
</button>
</div>
</div>
:bulb: Tip Key Differences Bootstrap Approach:
card, card-body, btn)Tailwind Approach:
Bootstrap 5 includes utility classes similar to Tailwind (but fewer):
<div class="d-flex justify-content-between align-items-center p-3 mb-4 bg-light rounded">
<h3 class="text-primary mb-0">Utilities Example</h3>
<button class="btn btn-outline-primary btn-sm">Action</button>
</div>
<div class="d-none d-md-block">Hidden on mobile</div>
<div class="d-block d-md-none">Visible on mobile</div>
<div class="mt-3 mb-4 px-2 py-1">Margin and padding utilities</div>
<p class="text-center text-primary fw-bold">Centered, primary, bold text</p>
| Criteria | Bootstrap | Tailwind |
|---|---|---|
| Approach | Component-based | Utility-first |
| Learning Curve | Easier for beginners | Requires CSS knowledge |
| Customization | Override default styles | Full control with utilities |
| Design Speed | Fast with ready-made components | Fast with consistent styling |
| File Size | Larger due to unused components | Smaller with PurgeCSS |
| Ecosystem | Rich components and JS plugins | Requires third-party integrations |
Bootstrap gives you:
Choose Bootstrap when you want to build quickly with ready-made components. Choose Tailwind when you need more control over custom designs.
In the next lesson, we'll build a Bootstrap layout using grid and cards together - and explore more interactivity with JavaScript-powered components.