Bootstrap 5 builds layouts from ready classes: navbar navbar-expand-lg for a menu, row and col-md-4 for a 12-column grid, card for content boxes, btn btn-primary for buttons and alert alert-success for messages. Add the 5.3.3 CSS from a CDN, plus the JavaScript bundle only for interactive parts like modals and dropdowns.
| Component | Bootstrap 5 | Tailwind idea |
|---|---|---|
| Container | container | mx-auto max-w-7xl px-4 |
| Grid row and column | row, col-md-4 | grid md:grid-cols-3 gap-6 |
| Card | card, card-body | rounded-xl border p-6 |
| Primary button | btn btn-primary | rounded-md bg-blue-600 px-4 py-2 text-white |
| Alert | alert alert-warning | rounded-md border bg-amber-50 p-4 |
Updated
Each component below is written fresh against Bootstrap 5.3 and shown live, with the Tailwind CSS version of the same thing beside it, so you can compare the two vocabularies or port a page from one to the other. A class translator handles the common one-to-one swaps.
Each live frame loads an unmodified copy of the Bootstrap 5.3.3 stylesheet that we host ourselves. In your own project, load it from the official CDN with the link shown below. Scripts are off in the frames, so only the CSS side of each component shows.
Put the stylesheet in the head and the bundle before the closing body tag. Copy the integrity hashes from getbootstrap.com and add them as integrity and crossorigin attributes.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- only if you use modals, dropdowns, collapse, tooltips or popovers: -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>navbar-expand keeps the links visible at every width, since the frame cannot run the collapse script. Use navbar-expand-lg plus a toggler on a real site.
<link rel="stylesheet" href="/vendor/bootstrap-5.3.3/bootstrap.min.css">
<nav class="navbar navbar-expand bg-body-tertiary px-3">
<a class="navbar-brand fw-bold" href="#">Harbour Cafe</a>
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Hours</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>The same component with Tailwind utility classes. It needs a Tailwind build, so it is shown as code only.
<nav class="flex items-center gap-6 bg-slate-100 px-4 py-3">
<a href="#" class="font-bold text-slate-900">Harbour Cafe</a>
<ul class="ml-auto flex gap-4 text-slate-600">
<li><a href="#" aria-current="page" class="text-slate-900">Menu</a></li>
<li><a href="#" class="hover:text-slate-900">Hours</a></li>
<li><a href="#" class="hover:text-slate-900">Contact</a></li>
</ul>
</nav>Three cards share a row with g-3 gutters. Swap col-4 for col-md-4 so they stack on phones.
<link rel="stylesheet" href="/vendor/bootstrap-5.3.3/bootstrap.min.css">
<div class="container py-3"><div class="row g-3">
<div class="col-4"><div class="card h-100"><div class="card-body">
<h5 class="card-title">Espresso</h5><p class="card-text">Double shot, house blend.</p>
<a href="#" class="btn btn-sm btn-outline-primary">Order</a></div></div></div>
<div class="col-4"><div class="card h-100"><div class="card-body">
<h5 class="card-title">Flat white</h5><p class="card-text">Silky milk, strong base.</p>
<a href="#" class="btn btn-sm btn-outline-primary">Order</a></div></div></div>
<div class="col-4"><div class="card h-100"><div class="card-body">
<h5 class="card-title">Cold brew</h5><p class="card-text">Steeped for 18 hours.</p>
<a href="#" class="btn btn-sm btn-outline-primary">Order</a></div></div></div>
</div></div>The same component with Tailwind utility classes. It needs a Tailwind build, so it is shown as code only.
<div class="grid gap-3 p-4 md:grid-cols-3">
<div class="rounded-lg border border-slate-200 p-4">
<h5 class="text-lg font-medium">Espresso</h5>
<p class="mb-3 text-slate-600">Double shot, house blend.</p>
<a href="#" class="rounded border border-blue-600 px-2 py-1 text-sm text-blue-600 hover:bg-blue-600 hover:text-white">Order</a>
</div>
<!-- repeat for the other two -->
</div>Columns add up to 12. Each col-* class here is fixed so you can see the split; add sm, md or lg prefixes for responsive changes.
<link rel="stylesheet" href="/vendor/bootstrap-5.3.3/bootstrap.min.css">
<div class="container text-center py-2">
<div class="row g-2 mb-2"><div class="col-8"><div class="p-2 bg-primary-subtle border">col-8</div></div><div class="col-4"><div class="p-2 bg-primary-subtle border">col-4</div></div></div>
<div class="row g-2 mb-2"><div class="col-4"><div class="p-2 bg-success-subtle border">col-4</div></div><div class="col-4"><div class="p-2 bg-success-subtle border">col-4</div></div><div class="col-4"><div class="p-2 bg-success-subtle border">col-4</div></div></div>
<div class="row g-2"><div class="col"><div class="p-2 bg-warning-subtle border">col</div></div><div class="col-auto"><div class="p-2 bg-warning-subtle border">col-auto</div></div><div class="col"><div class="p-2 bg-warning-subtle border">col</div></div></div>
</div>The same component with Tailwind utility classes. It needs a Tailwind build, so it is shown as code only.
<div class="grid grid-cols-12 gap-2 p-2 text-center">
<div class="col-span-8 border bg-blue-100 p-2">col-span-8</div>
<div class="col-span-4 border bg-blue-100 p-2">col-span-4</div>
<div class="col-span-12 md:col-span-4 border bg-green-100 p-2">md:col-span-4</div>
</div>form-label and form-control give consistent fields; is-invalid with invalid-feedback shows an error without any script.
<link rel="stylesheet" href="/vendor/bootstrap-5.3.3/bootstrap.min.css">
<form class="p-3" style="max-width: 24rem">
<div class="mb-3">
<label for="nm" class="form-label">Name</label>
<input id="nm" class="form-control" autocomplete="name">
</div>
<div class="mb-3">
<label for="em" class="form-label">Email</label>
<input id="em" type="email" class="form-control is-invalid" value="sam@" aria-describedby="em-fb">
<div id="em-fb" class="invalid-feedback">Enter a full email address.</div>
</div>
<div class="form-check mb-3">
<input id="nl" type="checkbox" class="form-check-input"><label for="nl" class="form-check-label">Send me offers</label>
</div>
<button class="btn btn-primary">Sign up</button>
</form>The same component with Tailwind utility classes. It needs a Tailwind build, so it is shown as code only.
<form class="max-w-sm space-y-4 p-4">
<label class="block text-sm font-medium">Email
<input type="email" aria-invalid="true" aria-describedby="em-fb" class="mt-1 block w-full rounded-md border border-red-500 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-red-300">
</label>
<p id="em-fb" class="text-sm text-red-600">Enter a full email address.</p>
<button class="rounded-md bg-blue-600 px-4 py-2 text-white">Sign up</button>
</form>position-static and d-block display the modal inline for a demo. On a live page, leave those out and open it with data-bs-toggle="modal".
<link rel="stylesheet" href="/vendor/bootstrap-5.3.3/bootstrap.min.css">
<div class="modal position-static d-block bg-secondary bg-opacity-25 py-3" tabindex="-1" role="dialog" aria-labelledby="mt">
<div class="modal-dialog"><div class="modal-content">
<div class="modal-header"><h5 id="mt" class="modal-title">Cancel booking?</h5>
<button type="button" class="btn-close" aria-label="Close"></button></div>
<div class="modal-body"><p>Your table for 4 on Friday will be released.</p></div>
<div class="modal-footer"><button class="btn btn-secondary">Keep it</button><button class="btn btn-danger">Cancel booking</button></div>
</div></div>
</div>The same component with Tailwind utility classes. It needs a Tailwind build, so it is shown as code only.
<dialog open aria-labelledby="mt" class="w-full max-w-md rounded-xl p-0 shadow-xl backdrop:bg-black/40">
<div class="flex items-center justify-between border-b p-4">
<h5 id="mt" class="text-lg font-medium">Cancel booking?</h5>
<button aria-label="Close" class="text-xl leading-none">×</button>
</div>
<p class="p-4">Your table for 4 on Friday will be released.</p>
<div class="flex justify-end gap-2 border-t p-4">
<button class="rounded-md bg-slate-500 px-3 py-2 text-white">Keep it</button>
<button class="rounded-md bg-red-600 px-3 py-2 text-white">Cancel booking</button>
</div>
</dialog>Contextual colours come from alert-* modifiers. Add role="alert" only to messages that appear after an action.
<link rel="stylesheet" href="/vendor/bootstrap-5.3.3/bootstrap.min.css">
<div class="p-3">
<div class="alert alert-success" role="alert">Payment received. A receipt is on its way.</div>
<div class="alert alert-warning">Your trial ends in 3 days.</div>
<div class="alert alert-danger d-flex gap-2"><strong>Error:</strong> The card was declined.</div>
</div>The same component with Tailwind utility classes. It needs a Tailwind build, so it is shown as code only.
<div class="space-y-3 p-4">
<div role="alert" class="rounded-md border border-green-200 bg-green-50 p-4 text-green-800">Payment received. A receipt is on its way.</div>
<div class="rounded-md border border-amber-200 bg-amber-50 p-4 text-amber-800">Your trial ends in 3 days.</div>
<div class="rounded-md border border-red-200 bg-red-50 p-4 text-red-800"><strong>Error:</strong> The card was declined.</div>
</div>Solid, outline, size and disabled variants. A link styled as a button keeps role=button only when it triggers an action rather than navigation.
<link rel="stylesheet" href="/vendor/bootstrap-5.3.3/bootstrap.min.css">
<div class="p-3 d-flex flex-wrap gap-2">
<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-secondary">Outline</button>
<button class="btn btn-success btn-lg">Large</button>
<button class="btn btn-danger btn-sm">Small</button>
<button class="btn btn-dark" disabled>Disabled</button>
<a class="btn btn-link" href="#">Link button</a>
</div>The same component with Tailwind utility classes. It needs a Tailwind build, so it is shown as code only.
<div class="flex flex-wrap gap-2 p-4">
<button class="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">Primary</button>
<button class="rounded-md border border-slate-500 px-4 py-2 text-slate-700 hover:bg-slate-500 hover:text-white">Outline</button>
<button class="rounded-lg bg-green-600 px-5 py-3 text-lg text-white">Large</button>
<button class="rounded bg-red-600 px-2 py-1 text-sm text-white">Small</button>
<button disabled class="rounded-md bg-slate-900 px-4 py-2 text-white disabled:opacity-60">Disabled</button>
</div>These are close matches, not exact: Bootstrap spacing steps 1 to 5 map to roughly 0.25, 0.5, 1, 1.5 and 3 rem, while Tailwind uses 0.25 rem per step.
| Bootstrap 5 | Tailwind CSS |
|---|---|
| d-flex | flex |
| d-none | hidden |
| d-block | block |
| d-grid | grid |
| flex-column | flex-col |
| flex-wrap | flex-wrap |
| justify-content-between | justify-between |
| justify-content-center | justify-center |
| align-items-center | items-center |
| gap-2 | gap-2 |
| gap-3 | gap-4 |
| ms-auto | ml-auto |
| me-auto | mr-auto |
| mx-auto | mx-auto |
| mt-3 | mt-4 |
| mb-3 | mb-4 |
| p-3 | p-4 |
| px-3 | px-4 |
| py-2 | py-2 |
| text-center | text-center |
| text-end | text-right |
| fw-bold | font-bold |
| fw-semibold | font-semibold |
| text-uppercase | uppercase |
| fs-6 | text-base |
| text-muted | text-slate-500 |
| text-white | text-white |
| bg-primary | bg-blue-600 |
| bg-light | bg-slate-100 |
| bg-dark | bg-slate-900 |
| rounded | rounded |
| rounded-3 | rounded-lg |
| rounded-pill | rounded-full |
| shadow-sm | shadow-sm |
| shadow | shadow-md |
| border | border |
| w-100 | w-full |
| h-100 | h-full |
| position-relative | relative |
| position-absolute | absolute |
| visually-hidden | sr-only |
| container | container mx-auto px-4 |
| row | flex flex-wrap |
| col | flex-1 |
| col-6 | w-1/2 |
| col-4 | w-1/3 |
| col-3 | w-1/4 |
| col-md-6 | md:w-1/2 |
| col-md-4 | md:w-1/3 |
| col-lg-3 | lg:w-1/4 |
Bootstrap pays off on internal tools, admin panels and quick marketing sites where the default look is acceptable and working widgets matter more than a distinctive style. You write fewer classes and get tested keyboard behaviour for modals and dropdowns.
Tailwind pays off when a designer hands over a bespoke layout. Fighting Bootstrap's card padding and button styles to match a custom design takes longer than building the card from utilities, and only the classes you use end up in the stylesheet.
Bootstrap is released under the MIT licence by The Bootstrap Authors. You can use it in commercial work; keep the licence comment that ships at the top of the CSS and JavaScript files. The markup on this page is our own and may be copied freely.
Use navbar-expand-lg (or md, sm) on the nav, add a navbar-toggler button with data-bs-toggle="collapse" and data-bs-target pointing at the menu id, and wrap the links in a div with collapse navbar-collapse. The toggle needs the Bootstrap JavaScript bundle to open and close.
Twelve per row. col-6 takes half, col-4 a third, and breakpoint prefixes such as col-md-4 apply from that width up. Six breakpoints exist: the default below 576px, then sm, md, lg, xl and xxl at 576, 768, 992, 1200 and 1400 pixels.
Bootstrap is faster when you want finished components and a conventional look with little design work. Tailwind is faster when you have your own design and build components yourself. Both are MIT-licensed and well maintained.
No. Bootstrap 5 dropped jQuery. Its JavaScript plugins are plain JavaScript, and Popper is the only dependency, included in the bundle file.
The examples run in a sandboxed frame with scripts turned off, so the modal is shown already open using the position-static and d-block classes. In a real page, the JavaScript bundle opens and closes it and manages focus.
Related: CSS frameworks compared, Flexbox and grid cheat sheet, HTML boilerplate, HTML page generator, WCAG checklist.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.