Bootstrap 3 shipped in August with a complete rewrite, and the most significant change wasn't technical—it was philosophical. Bootstrap finally embraced mobile-first design, which Foundation has championed from the start. Now that both frameworks share this foundation (pun intended), the differences are more interesting.
The Mobile-First Shift
Pre-Bootstrap 3, the approach was "desktop first, scale down." You designed for large screens, then added media queries to adapt for smaller ones. Bootstrap 3 inverts this:
/* Mobile-first: styles apply to all, overridden upward */
.column { width: 100%; }
@media (min-width: 768px) {
.column { width: 50%; }
}
/* vs Desktop-first: styles apply to desktop, overridden downward */
.column { width: 50%; }
@media (max-width: 767px) {
.column { width: 100%; }
}This seems like syntax sugar, but it changes design thinking. You start with constrained mobile screens and enhance for larger ones. Progressive enhancement instead of graceful degradation.
Foundation has done this from the beginning. Bootstrap catching up suggests mobile-first is becoming standard, not a ZURB-specific philosophy.
Where They Differ
With similar mobile-first approaches, the differences become nuanced:
Design Aesthetics
Bootstrap's design is more opinionated. The default styles are recognizable—rounded corners, specific color schemes, that distinctive button look. This is both strength and weakness. You get a polished default aesthetic, but "Bootstrap sites" are identifiable.
Foundation's default styling is more minimal. Less visual personality means less to override when you want custom design. ZURB seems to be targeting designers who want a grid and components but plan to heavily customize.
Grid Philosophy
Both use 12-column grids, but the implementation differs:
Bootstrap uses class names that specify breakpoints explicitly:
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">This is verbose but explicit. You can see exactly how the element behaves at each breakpoint.
Foundation uses nested logic:
<div class="small-12 medium-6 large-4 columns">Similar concept, different naming. Foundation's "small/medium/large" feels more semantic than Bootstrap's "xs/sm/md/lg", but this is mostly preference.
JavaScript Philosophy
Bootstrap's JavaScript components use data attributes heavily:
<button data-toggle="modal" data-target="#myModal">Open Modal</button>No JavaScript needed—the framework auto-initializes based on data attributes. This is convenient but creates "magic" that can be hard to debug.
Foundation requires more explicit JavaScript initialization:
$(document).foundation();Less magic, more control. You understand what's being initialized when.
Preprocessor Choice
Bootstrap 3 uses LESS, though the project is slowly moving toward Sass. Foundation uses Sass exclusively. This matters if you have strong preprocessor preferences or existing build tooling.
The larger question is whether preprocessor choice should drive framework selection. Probably not, but in practice, it influences adoption.
The "Everyone's Site Looks the Same" Problem
Bootstrap's popularity created a homogeneity problem. Countless sites look identical because they use default Bootstrap styles. The framework succeeded so well that it became a design cliché.
Foundation has less of this problem, partly because it's less popular, partly because its defaults are more minimal. But if Foundation achieves Bootstrap's adoption, it'll face the same issue.
The real problem is that teams use frameworks without customization. Both Bootstrap and Foundation are designed to be customized—variables, component overrides, custom builds. But defaults are easy, and customization takes time.
This isn't the framework's fault. It's a reminder that frameworks provide structure, not design. Design still requires designers.
Performance Considerations
Both frameworks are heavy. Bootstrap 3's CSS is ~120KB minified, JavaScript ~30KB. Foundation is similar. For mobile users on slow connections, this is significant.
Neither framework encourages using only what you need. The "include everything" approach means shipping grid code, component styles, and JavaScript for features you don't use.
Custom builds help, but they're extra work. Most teams ship the whole framework, accepting the performance cost for development speed. This trade-off works for applications but is questionable for content sites.
When to Use Which
The practical differences are smaller than the marketing suggests:
Choose Bootstrap if:
- You want a complete, polished default design
- Your team knows Bootstrap already
- You're prototyping and need speed over customization
- You're building internal tools where custom branding matters less
Choose Foundation if:
- You're doing heavy design customization
- You prefer Sass over LESS
- You want more explicit control over JavaScript initialization
- Your team has design resources and values minimal defaults
Choose neither if:
- You're building a simple content site (a lightweight grid is enough)
- Performance is critical (both are heavy)
- Your design is completely custom (you're overriding everything anyway)
The Broader Pattern
CSS frameworks reflect a tension in web development: velocity versus customization. Frameworks accelerate development by providing ready-made components. But they impose design systems that can be hard to escape.
Bootstrap and Foundation both try to be "frameworks you can customize," but real customization means understanding their internals. At that point, are you using a framework or maintaining someone else's CSS architecture?
The mobile-first convergence suggests the industry is settling on patterns: fluid grids, breakpoint-based design, component libraries. Maybe in a few years, these will be browser primitives rather than framework features.
Looking Forward
Bootstrap 3's rewrite and Foundation 5 (currently in beta) show both frameworks maturing. They're converging on mobile-first, component-based approaches. The differences are becoming more about aesthetics and developer experience than capability.
What's interesting is what happens next. Do frameworks continue adding features, becoming more comprehensive and heavier? Or do they slim down, focusing on core grid and component patterns while letting teams build custom styling?
My guess is we'll see both. Bootstrap and Foundation will continue evolving as full-featured frameworks. But we'll also see a reaction—minimal grids and utility-first approaches that give developers more control.
For now, both frameworks are solid choices. The decision matters less than understanding why you're using a framework at all.
Resources:
- Bootstrap – Official documentation
- Foundation – ZURB's framework docs
- Bootstrap vs Foundation – Side-by-side comparison
- Customizing Bootstrap – Custom build tool
