CSS styling

Bulma & Foundation

Class-based CSS frameworks with no JavaScript. Bulma is a modern, Flexbox-based component library; Foundation is the long-running, enterprise-friendly alternative. You build UIs with semantic class names alone.

Demo 01

The Bulma columns system

Bulma's grid is just .columns wrapping .column — they share the row evenly via Flexbox and stack on mobile automatically. Resize to see them wrap.

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
</div>

Demo 02

Notifications

Bulma's .notification block plus a colour modifier gives you instant message banners — the same colour modifiers (is-warning, is-danger…) appear across every component.

This is a warning notification — .notification.is-warning.

And a danger one — .notification.is-danger.

<div class="notification is-warning">Warning</div>
<div class="notification is-danger">Danger</div>

Demo 03

Buttons & tags

Bulma's .button and .tag elements share a consistent set of colour and size modifiers, so the whole UI stays visually coherent.

primary info warning medium

<button class="button is-primary">Primary</button>
<span class="tag is-info is-light">info</span>

Demo 04

A card

Bulma's .card composes a header, content and footer — every part a named class, no custom CSS needed.

Bulma card

CSS-only components

Built from semantic classes — no JavaScript involved.

no JS required

<div class="card">
  <header class="card-header">...</header>
  <div class="card-content">...</div>
  <footer class="card-footer">...</footer>
</div>

Demo 05

Foundation — the other class-based framework

Foundation by Zurb works the same way: you compose layouts and components from utility-style classes. Its grid uses .grid-x + .cell instead of Bulma's .columns + .column, but the philosophy — readable class names, mobile-first, no required JavaScript for static components — is identical.

Roughly equivalent grid markup in each framework:

Bulma
.columns > .column

Foundation
.grid-x > .cell

<!-- Foundation grid -->
<div class="grid-x grid-margin-x">
  <div class="cell small-6">...</div>
  <div class="cell small-6">...</div>
</div>

Built with real Bulma 1.0 (CSS-only) loaded from jsDelivr — every column, notification, button, tag and card above is a genuine Bulma component, styled purely by its class names with zero JavaScript. The Foundation section is illustrative markup, since loading two competing frameworks' CSS at once would conflict. Demos are wrapped in a frame so Bulma's styles stay scoped to the demo area.

↑ All 64 tools