Ibravra is the decision engine and digital knowledge hub for modern founders, operators, and cross-border businesses. We publish research-backed incorporation guides, interactive financial tools, and head-to-head software reviews.

Are Ibravra business tools and calculators free to use?

Yes, all interactive financial calculators, invoice generators, and business launch checklists are 100% free with no registration or credit card required.

How does Ibravra verify software reviews and guides?

All IBRAVRA content follows our strict Editorial Constitution and Post-AI Value Rule, requiring real practitioner experience, primary source statutory checks (IRS/FinCEN), and verifiable benchmarks.

Which CSS framework ships the least CSS?

Tailwind CSS, by a wide margin, when it is built the way its docs describe. On the demo page built for this playbook, the Tailwind v4.3.5 scanned build was 10,548 bytes raw and 2,869 bytes gzip. The full Bootstrap 5.3.8 minified CSS was 232,111 bytes raw and 30,786 gzip, and the full Bulma 1.0.4 minified CSS was 677,931 bytes raw and 65,219 gzip.

Are Tailwind, Bootstrap and Bulma free?

Yes. All three are free and open-source software, licensed under the MIT license, with no license fee at any scale. The price of the decision is not the license — it is the shipped bytes, the JavaScript dependency, the build step, and the hours a team spends learning and maintaining the chosen system.

Does Bootstrap need JavaScript?

Yes, for 13 of its components. Bootstrap's own docs list accordions, modals, dropdowns, tooltips, popovers, carousels, offcanvas panels and toasts as components that explicitly require its JavaScript, and dropdowns, popovers and tooltips also require Popper. Tailwind CSS and Bulma ship CSS only; interactive behavior is the developer's own JavaScript.

Can Bootstrap or Bulma be made smaller?

Yes, both document a reduction path. Bootstrap can be built from its Sass source with only the components a project uses, and Bulma can be built from its Sass library by importing only the modules needed. The full-file numbers in this playbook are the drop-in CDN payloads; a Sass build of either framework ships less, at the cost of a build step and maintenance of the import list.

What is the difference between Tailwind and the other two?

Tailwind is utility-first: the developer writes small single-purpose classes in the HTML, and the build scans the templates and generates only the styles those classes need. Bootstrap and Bulma are component-first: the developer writes a class like card or button and the framework supplies the whole component's styling, including styles the page may never use.

Which framework should a team with no build step choose?

Bootstrap or Bulma. Both work from a single CDN link with no build step: Bootstrap's docs show a production-ready page from two tags, and Bulma's docs describe a single CSS file that includes all of Bulma. Tailwind's documented route is a build — a Vite plugin, PostCSS, or its CLI — and without a build there is no scanned output to ship.

Software Reviews • 12 min read

Tailwind vs Bootstrap vs Bulma: The CSS Framework Playbook for 2026

All three CSS frameworks cost $0. The real price is bytes: Tailwind ships 2,869 gzip bytes for our demo page, Bootstrap 30,786, Bulma 65,219 — measured from local builds on November 10, 2026.

By Enow A. Jovial • Published 2026-11-10

Tailwind vs Bootstrap vs Bulma: The CSS Framework Playbook for 2026

Founder & CEO Insight — Enow A. Jovial

"Every framework in this comparison costs zero dollars. That is the trap: a free framework can still be expensive. It charges in bytes on every page load, in JavaScript you did not ask for, and in hours your team spends fighting a system that was built for someone else's design. Price the decision in those currencies, not in the license fee."

— Enow A. Jovial, Founder & Chief Executive Officer

Three CSS frameworks dominate front-end work in 2026, and all three are free. Tailwind CSS is utility-first: small classes in the HTML, and a build that generates only the styles the page uses. Bootstrap is component-first: a class like card or btn buys a whole component, plus a JavaScript bundle for interactive parts. Bulma is class-first and CSS-only: a single file built on Flexbox, with no JavaScript at all. The choice is not about price. It is about bytes, build steps, and who owns the design system.

This playbook does not repeat the vendors' marketing. It builds the same demo page three ways with the current releases — Tailwind CSS 4.3.5, Bootstrap 5.3.8, Bulma 1.0.4, installed from npm on November 10, 2026 — and measures what each one actually ships.

The decision in one table

Your position	The move	What you pay	Authority
Performance is the priority	Tailwind, built per docs	2,869 gzip bytes of CSS for the demo page	Tailwind CSS docs; editorial build, Nov 10, 2026
No build step, ship today	Bootstrap or Bulma from a CDN link	30,786 gzip bytes CSS (+23,707 JS) or 65,219 gzip bytes CSS	Bootstrap docs v5.3; Bulma install docs
Interactive components out of the box	Bootstrap	A JS bundle plus Popper for dropdowns, modals, tooltips	Bootstrap docs v5.3, JS components list
A design system you fully own	Tailwind	A build step and a utility vocabulary the team must learn	Tailwind CSS docs
CSS variables and dark mode with no build	Bulma	65,219 gzip bytes of CSS, the largest drop-in file	Bulma docs; editorial build, Nov 10, 2026
An existing Bootstrap codebase	Stay on Bootstrap	Migration cost dominates any byte saving	See the migration model below

The three architectures

Tailwind CSS works by scanning all of the HTML files, JavaScript components and other templates for class names, generating the corresponding styles, and writing them to a static CSS file. Its own docs describe the result as fast, flexible and reliable, with zero runtime. The install route the docs lead with is a Vite plugin: npm install tailwindcss @tailwindcss/vite, a plugin entry in the Vite configuration, and @import "tailwindcss" in the CSS file. PostCSS, a standalone CLI and framework guides are the other routes. There is no Tailwind runtime in the browser — the work happens at build time.

Bootstrap is the opposite shape. Its docs open with a quick start that needs no build steps at all: two tags, one for the CSS and one for the JavaScript bundle, and the page works. The current release is 5.3.8, served from a CDN with an integrity hash on each file. Bootstrap is developed mobile-first, and its global styles normalize cross-browser rendering through Reboot. Customization comes from Sass: the docs point to building with the source files via a package manager for teams that want only part of the framework.

Bulma is the simplest shape of the three. Its docs open with the line that it is free, open source, and a modern CSS framework based on Flexbox, and that a developer needs only one CSS file to use it. The install page offers a CDN link to bulma.min.css, a downloadable release, or the Sass library for a custom build. Bulma v1 adds CSS variables, themes, an automatic dark mode, and color palettes generated from a single input color. It ships no JavaScript bundle: interactive behavior is the developer's code.

Installing Tailwind CSS with Vite: npm install tailwindcss @tailwindcss/vite

The honest price: $0, and then the real bill

All three frameworks are free and open-source software under the MIT license. There is no license fee, no per-seat charge, and no paid tier that unlocks the framework itself. Any article that prices this decision in license fees is pricing the wrong thing.

The real bill has three lines. First, shipped bytes: the CSS — and, for Bootstrap, the JavaScript — that every first-time visitor downloads. Second, the build step: Tailwind requires one, Bootstrap and Bulma do not. Third, the hours: the time a team spends learning the system's vocabulary, maintaining its configuration, and fighting it when a design falls outside its components. This playbook measures the first line exactly and models the third honestly.

Example 1: the measured bundle

Example 1 is the measurement this playbook stands on. The same demo page — a navigation bar, a hero, three pricing cards, a signup form and a footer — was built three ways on November 10, 2026. For Tailwind, the page was written with utility classes and built with the Tailwind v4.3.5 CLI in minified mode. For Bootstrap and Bulma, the measurement is the full minified file as served from the CDN, which is what a drop-in install ships.

Framework and file	Raw bytes	Gzip bytes	How it was measured
Tailwind v4.3.5, scanned build of the demo page	10,548	2,869	Tailwind CLI, minified, Nov 10, 2026
Bootstrap v5.3.8, bootstrap.min.css (full)	232,111	30,786	npm package file, Nov 10, 2026
Bootstrap v5.3.8, bootstrap.bundle.min.js (full)	80,496	23,707	npm package file, Nov 10, 2026
Bulma v1.0.4, bulma.min.css (full)	677,931	65,219	npm package file, Nov 10, 2026

The comparison is deliberately asymmetric, and the asymmetry is the point. Tailwind ships only what the page uses; Bootstrap and Bulma ship the whole framework unless the team cuts it down with a Sass build. The ratios, on gzip bytes:

\text{Bulma} \div \text{Tailwind} = 65{,}219 \div 2{,}869 = 22.73\times

\text{Bootstrap CSS} \div \text{Tailwind} = 30{,}786 \div 2{,}869 = 10.73\times

\text{Bootstrap CSS + JS} \div \text{Tailwind} = 54{,}493 \div 2{,}869 = 18.99\times

\text{Bulma} \div \text{Bootstrap CSS} = 65{,}219 \div 30{,}786 = 2.12\times

On raw bytes the gap is wider: Bulma's minified file is 64.27 times the Tailwind build, and Bootstrap's minified CSS is 22.01 times it. A first-time visitor on a slow connection feels the gzip number, not the raw number — but both point the same way.

The byte gap is not a rounding error. Bulma's drop-in CSS file is 22.73 times the Tailwind build of the same page, and Bootstrap's CSS plus its JavaScript bundle is 18.99 times. If the page is the product, the framework is the freight.

Example 2: the bandwidth bill

Example 2 turns the byte gap into a monthly bill. Take a site with 100,000 page views a month, counting only first-visit downloads at gzip size, before any browser caching. The monthly CSS transfer for each framework:

\text{Tailwind} = 100{,}000 \times 2{,}869 = 286{,}900{,}000\ \text{bytes} = 0.29\ \text{GB}

\text{Bootstrap CSS} = 100{,}000 \times 30{,}786 = 3{,}078{,}600{,}000\ \text{bytes} = 3.08\ \text{GB}

\text{Bootstrap CSS + JS} = 100{,}000 \times 54{,}493 = 5{,}449{,}300{,}000\ \text{bytes} = 5.45\ \text{GB}

\text{Bulma} = 100{,}000 \times 65{,}219 = 6{,}521{,}900{,}000\ \text{bytes} = 6.52\ \text{GB}

\text{Saving, Bulma to Tailwind} = 6.52\ \text{GB} - 0.29\ \text{GB} = 6.24\ \text{GB per month}

\text{Saving, Bootstrap full to Tailwind} = 5.45\ \text{GB} - 0.29\ \text{GB} = 5.16\ \text{GB per month}

Two honest caveats belong on this table. First, browser caching means repeat visitors download nothing — the bill above is the first-visit cost, which is the cost that matters for new traffic from search and social. Second, a Sass build of Bootstrap or Bulma ships less than the full file, so a team willing to maintain an import list can close much of the gap. The numbers above are the drop-in defaults, which is what most teams actually ship.

What the bundle number does not decide

The byte gap is real, and it is not the whole decision. Four things the bundle number cannot tell a team:

Speed of writing. Bootstrap and Bulma give a developer a card, a navbar and a modal in one class. Tailwind gives the developer the pieces and asks for the assembly. A team shipping a dashboard in a week will move faster with components; a team building a brand with a custom look will move faster with utilities once the vocabulary is learned.

JavaScript. Bootstrap's components need its JavaScript, and dropdowns, popovers and tooltips also need Popper. That is 23,707 gzip bytes on top of the CSS, plus a second dependency to keep updated. Tailwind and Bulma ship no JavaScript, so a modal or dropdown is the developer's own code — smaller to ship, larger to write and test.

Theming. Bulma's v1 theming is the strongest out of the box: CSS variables, a single input color that generates a palette, and an automatic dark mode. Bootstrap's theming runs through Sass variables and CSS custom properties. Tailwind's theming runs through its @theme configuration. A team that needs dark mode on day one has the least work with Bulma.

Design ownership. Tailwind's utility vocabulary makes a custom design cheap to express and hard to drift from, because there is no component to fight. Bootstrap and Bulma make a standard design cheap to express and a custom one expensive, because every deviation is an override. The framework that wins is the one whose default output is closest to the design the team actually wants.

Our Vercel vs Netlify vs Cloudflare Pages playbook covers where the built CSS is served from, and our Docker vs Kubernetes vs Amazon ECS playbook covers the other half of the shipping decision. Our Cloudflare Workers vs Vercel Edge Functions guide covers the runtime that serves the page.

Example 3: the migration model

Example 3 is a labelled model, not a measurement: the cost of moving an existing site between frameworks. Take a 40-page marketing site, and assume the migration takes 120 developer hours — rewriting class names, rebuilding components, and re-testing every page. The arithmetic is simple:

\text{Migration cost at } \$75\text{/hour} = 120 \times \$75 = \$9{,}000

\text{Migration cost at } \$150\text{/hour} = 120 \times \$150 = \$18{,}000

The assumptions are the whole argument: 120 hours is a planning figure for a 40-page site, not a measured fact, and a site with a design system or heavy custom components will take longer. The point of the model is the comparison. At $9,000 to $18,000, a migration pays for itself only if the byte saving is worth more than the hours — and for most small sites, it is not. A team already on Bootstrap should stay on Bootstrap and cut the bundle with a Sass build, rather than pay a migration to chase Tailwind's 2,869 bytes. A team starting fresh has no migration cost, and should choose on the merits.

Do not migrate a working site to chase a bundle number. The full Bootstrap file is 30,786 gzip bytes; a Sass build with only the components the site uses is a fraction of that, and it costs hours, not weeks. The migration that makes sense is the one where the current framework is actively blocking the design — not the one where a benchmark looked smaller.

Decision matrix by team

Team profile	The pick	Why
Solo developer, new site, performance matters	Tailwind	Smallest shipped CSS, no runtime, full design control
Agency shipping client sites weekly	Bootstrap	Components out of the box, every developer already knows it
No build step, static site, ship today	Bulma or Bootstrap	One CDN link, no build, no toolchain to maintain
Design system with dark mode on day one	Bulma	CSS variables, palettes from one color, automatic dark mode
Existing Bootstrap codebase	Bootstrap	Migration cost beats any byte saving; cut with Sass instead
Custom brand, long-lived product	Tailwind	Utility vocabulary keeps the design owned, not overridden

Execution checklist

[x] Step 1: Measure before choosing: build the same page with each candidate and record the shipped bytes, as this playbook did on November 10, 2026.
[x] Step 2: Count the JavaScript: Bootstrap's bundle adds 23,707 gzip bytes and a Popper dependency — include it in the total.
[x] Step 3: Check the build step: Tailwind needs one; Bootstrap and Bulma do not. A team without a toolchain should not pick Tailwind.
[x] Step 4: Price the migration: a labelled model at 120 hours and the team's real hourly rate, against the byte saving.
[x] Step 5: Test the theming: build one dark-mode page and one custom component in each candidate before committing.
[x] Step 6: Plan the reduction path: if the pick is Bootstrap or Bulma, set up the Sass build that ships only the components in use.
[x] Step 7: Check the hosting cost: run the bandwidth math for the site's real traffic with our website cost calculator before treating bytes as free.

Start from the drop-in file, not from the framework's best case. Measure the full CDN payload first, then measure the reduced build. The gap between the two is the saving a Sass build or a Tailwind scan actually delivers — and it is the number the hosting bill will reflect.

All three frameworks cost $0. Tailwind ships 2,869 gzip bytes for the demo page because it generates only what the page uses. Bootstrap ships 30,786 bytes of CSS plus 23,707 of JavaScript, and Bulma ships 65,219 bytes of CSS, because both ship the whole framework by default. Pick on bytes, build step and design ownership — in that order — and never pay a migration to chase a bundle number.