# CSS vs Bootstrap: Key Distinctions and Overlaps in Responsive Design
> Compare CSS vs Bootstrap for responsive design. Discover their distinctions and overlaps, from manual media queries to pre-built components and modern utility frameworks.
- Repository: [Tailwind Labs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
- Tags: tutorial
- Published: 2026-02-16
---
**Plain CSS provides ultimate control through manual media queries, while Bootstrap offers pre-built components with responsive prefixes, and modern utility-first frameworks like Tailwind CSS bridge both worlds by generating breakpoint-specific utilities programmatically.**
When comparing **css vs bootstrap** for responsive web development, understanding their architectural differences is crucial for choosing the right approach. While both technologies ultimately compile to standard CSS rules that browsers interpret, they differ fundamentally in how developers write, customize, and maintain responsive layouts. The Tailwind CSS repository provides an excellent reference point for understanding how modern frameworks implement responsive design patterns that blend the flexibility of raw CSS with the convenience of component libraries.
## Core Architectural Differences
### Plain CSS: Manual Control
Writing responsive designs in plain CSS requires manually authoring **media queries** and custom selectors. You define breakpoints using `@media` rules and write specific CSS for each screen size. This approach offers complete control but requires maintaining separate stylesheets and remembering complex selector specificity rules.
### Bootstrap: Component-First Approach
Bootstrap provides a **pre-written component library** with classes like `col-md-6`, `navbar`, or `card`. Responsive behavior is achieved through **responsive prefixes** attached to component classes (e.g., `col-sm-6`, `d-md-none`). While this accelerates development, customization requires overriding Bootstrap's Sass variables or fighting against the framework's default styling.
### Tailwind CSS: Utility-First Implementation
Tailwind CSS introduces a **utility-first paradigm** implemented in [`packages/tailwindcss/src/design-system.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/design-system.ts). Instead of pre-built components, Tailwind generates low-level utility classes (e.g., `p-4`, `flex`, `sm:w-1/2`) that can be combined to build any interface. The [`variants.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/variants.ts) file contains the core logic for registering responsive variants, using the `compareBreakpointVariants` helper to order breakpoint variants correctly.
## Responsive Design Implementation Compared
The **css vs bootstrap** comparison becomes most apparent when examining how each handles responsive breakpoints.
**Plain CSS** requires explicit media query authoring:
```css
.card { padding: 1rem; }
@media (min-width: 640px) {
.card { padding: 2rem; }
}
```
**Bootstrap** uses responsive prefixes on component classes:
```html
```
**Tailwind CSS** implements responsive variants through its variants engine in [`packages/tailwindcss/src/variants.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/variants.ts). The `compareBreakpointVariants` function (lines 917-923) orders breakpoint variants, allowing any utility to become responsive by prefixing it with a breakpoint name:
```html
```
The Tailwind compiler processes these variants through [`css-parser.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/css-parser.ts), which parses directives into AST nodes and ultimately generates standard CSS media queries identical to what you would write manually.
## Customization and File Size Considerations
When evaluating **css vs bootstrap**, file size and customization flexibility are critical factors.
**Plain CSS** produces only the CSS you write, resulting in minimal file sizes but requiring manual maintenance of all responsive logic.
**Bootstrap** ships with a large compiled CSS file (approximately 200KB minified) containing all components, regardless of which ones you use. Customization requires overriding Sass variables or modifying the source, often leading to "fighting the framework" scenarios.
**Tailwind CSS** generates only the utilities you actually use through its JIT (Just-In-Time) compiler, implemented across `packages/@tailwindcss-node/src/compile.ts` and related files. The [`design-system.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/design-system.ts) file defines theme values (colors, spacing, breakpoints) that drive utility generation, while [`expand-declaration.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/expand-declaration.ts) expands shorthand utilities (e.g., `p-4` → `padding: 1rem`) into full CSS declarations.
This architecture means Tailwind can offer the comprehensive utility set of a framework like Bootstrap while maintaining file sizes comparable to hand-written CSS.
## Code Examples: Building the Same Component
Here is how a simple responsive card component looks across all three approaches.
### Plain CSS
```html
```
### Bootstrap
```html
```
The `p-3` applies default padding, while `p-sm-5` overrides it on screens ≥576px using Bootstrap's responsive spacing utilities.
### Tailwind CSS
```html
```
The `sm:` prefix adds breakpoint-specific utilities; Tailwind's compiler turns this into the same `@media (min-width: 640px)` rules you would write by hand. See the generation of `sm:` utilities in the variants engine in [`packages/tailwindcss/src/variants.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/variants.ts).
## How Tailwind Implements Responsive Variants
The Tailwind CSS source code reveals how modern frameworks bridge the gap between raw CSS and component libraries. The implementation resides in several key files:
- **[`packages/tailwindcss/src/variants.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/variants.ts)**: Contains the core logic for registering responsive variants. The `compareBreakpointVariants` helper (lines 917-923) orders breakpoint variants correctly, ensuring `sm:` utilities apply before `md:` utilities in the generated CSS.
- **[`packages/tailwindcss/src/design-system.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/design-system.ts)**: Defines theme values including breakpoints, colors, and spacing scales that drive utility generation. This file establishes the contract between configuration and generated CSS.
- **[`packages/tailwindcss/src/css-parser.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/css-parser.ts)**: Parses Tailwind directives and utility classes into AST nodes, ultimately generating standard CSS rules identical to hand-written media queries.
- **[`packages/tailwindcss/src/expand-declaration.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/expand-declaration.ts)**: Expands shorthand utilities (e.g., `p-4` → `padding: 1rem`) into full CSS declarations, handling the translation from utility classes to browser-compatible properties.
This architecture allows Tailwind to offer the granular control of CSS with the development speed of Bootstrap, while maintaining optimal file sizes through its JIT compiler implemented in `packages/@tailwindcss-node/src/compile.ts`.
## Summary
- **Plain CSS** provides maximum control and minimal file size but requires manual maintenance of media queries and selectors.
- **Bootstrap** accelerates development with pre-built components and responsive prefixes but ships with large CSS bundles and limited customization options.
- **Tailwind CSS** bridges both worlds through utility-first classes and programmatic variant generation, producing minimal CSS via JIT compilation while offering complete design flexibility.
- All three approaches ultimately compile to standard CSS media queries, but Tailwind's implementation in [`variants.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/variants.ts) and [`design-system.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/design-system.ts) demonstrates how modern frameworks automate responsive design patterns.
## Frequently Asked Questions
### What is the main difference between using plain CSS and Bootstrap for responsive design?
Plain CSS requires you to manually write `@media` queries and custom selectors for every responsive behavior, giving you complete control but demanding more maintenance. Bootstrap provides pre-written component classes with responsive prefixes (like `col-md-6`) that handle media queries automatically, trading some flexibility for rapid development speed.
### How does Tailwind CSS compare to Bootstrap in terms of file size and customization?
Tailwind CSS generates only the utility classes you actually use through its JIT compiler, resulting in significantly smaller CSS bundles compared to Bootstrap's ≈200KB minified file that includes all components regardless of usage. Customization in Tailwind happens through the [`design-system.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/design-system.ts) configuration, allowing you to define custom breakpoints, colors, and spacing without fighting against pre-built component styles.
### Can I use Tailwind CSS and Bootstrap together in the same project?
While technically possible, combining Tailwind CSS and Bootstrap is generally discouraged because both frameworks define global styles and utility classes that can conflict with each other. Tailwind's utility-first approach in [`variants.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/variants.ts) provides enough flexibility to replicate Bootstrap's component patterns without the overhead of including both frameworks.
### When should I choose plain CSS over a framework like Bootstrap or Tailwind?
Choose plain CSS when building extremely lightweight applications where every kilobyte matters, when you need highly specific, non-standard responsive behaviors that frameworks don't support, or when you're creating a design system from scratch with unique requirements. For rapid prototyping or standard responsive grids, frameworks like Tailwind (with its `compareBreakpointVariants` logic) or Bootstrap offer significant time savings.