How to Tell If a Website Uses Bulma

Bulma is a popular, lightweight, Flexbox-based CSS framework known for its clean syntax, semantic component classes and complete lack of JavaScript. Because it leaves a very recognisable class-name footprint, detecting it is straightforward: inspect the layout and look for its distinctive columns grid and is-/has- modifier classes. This guide covers every reliable signal, the framework's pure-CSS nature, the look-alikes to rule out, and what a Bulma build tells you about the developer.

What is Bulma?

Bulma, released in 2016, is an open-source CSS framework built entirely on Flexbox. Its appeal is simplicity and readability: it provides a responsive grid (columns/column), a set of ready-made components (navbar, hero, card, modal, message), and a large vocabulary of modifier classes — all delivered as pure CSS with no JavaScript. Developers add interactivity themselves, which keeps Bulma lightweight and unopinionated about the JS layer. Its clean, human-readable class names made it a favourite for marketing sites, documentation, portfolios, landing pages and smaller projects, as well as a popular choice in tutorials.

For detection, the key context is that Bulma is CSS-only, so unlike React component libraries there is no JavaScript global to check — detection is entirely about its characteristic class names and its stylesheet. Its presence signals a developer who wanted modern, clean styling without the weight of a JS-heavy framework, often valuing simplicity and readability. Because its class names are so distinctive (and semantic), Bulma is one of the easier CSS frameworks to recognise by inspecting the DOM.

How Bulma is delivered and used

Bulma is delivered as a static stylesheet — bulma.css or bulma.min.css — typically loaded from a CDN (cdn.jsdelivr.net/npm/bulma, cdnjs.cloudflare.com) or bundled into the site's CSS. In the markup, Bulma is recognised by its distinctive class vocabulary. The grid uses columns and column (with sizing like is-half, is-one-third). Components use semantic names: navbar, hero, card, box, modal, message, button, tag. And the defining trait is the modifier system: is- prefixes for state and style (is-primary, is-large, is-active, is-pulled-right, is-flex) and has- prefixes for helpers (has-text-centered, has-background-light, has-text-weight-bold).

That is-/has- modifier convention, combined with the columns grid and semantic component names, is highly characteristic of Bulma and rarely confused with other frameworks. Because Bulma ships no JavaScript, you will not find a Bulma JS file or global — the stylesheet and the class names are the whole footprint. Knowing this — the bulma.css stylesheet, the columns/column grid, the semantic components, and especially the is-/has- modifiers — makes detection quick and certain.

How to tell if a website uses Bulma

Confirm at least two of the following.

1. Inspect the layout. Right-click a section or grid and look for columns/column classes and component classes like navbar, hero or card.

2. Look for is-/has- modifiers. Classes like is-primary, is-pulled-right, has-text-centered and has-background-light are highly characteristic of Bulma.

3. Check the stylesheet. In the Network tab or source, look for bulma.css/bulma.min.css, often from cdn.jsdelivr.net/npm/bulma or cdnjs.

4. Search the DOM. In the Elements panel, search for is- and column — a consistent pattern of Bulma classes confirms it.

5. Note the absence of JS. Bulma has no JavaScript, so there is no JS global; if you find the class patterns and the stylesheet but no framework JS, that fits Bulma.

What the Bulma signals look like

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1/css/bulma.min.css">
<div class="columns">
  <div class="column is-half"><button class="button is-primary is-large">Buy</button></div>
</div>
<nav class="navbar"> … </nav>
<p class="has-text-centered has-text-weight-bold">…</p>

The combination of the bulma.css stylesheet, the columns/column grid, and is-/has- modifier classes is conclusive.

Bulma versus other CSS frameworks — avoiding false positives

Match the class vocabulary to keep CSS frameworks distinct. Bulma uses columns/column, semantic components (navbar, hero) and is-/has- modifiers; Bootstrap uses container/row/col, btn, and modifiers like btn-primary and text-center (no is-/has- prefix); Tailwind uses low-level utilities (flex, pt-4, text-center, bg-blue-500) rather than semantic components; Foundation uses row/columns and its own component classes. The is-/has- modifier convention is the clearest Bulma discriminator. A subtlety: some sites customise or extend Bulma, but the core class vocabulary remains. Because Bulma is CSS-only, do not look for a JS global — its absence is consistent with Bulma, not a contradiction.

How reliable is each Bulma signal?

The combination of the columns grid and is-/has- modifier classes is definitive — that vocabulary is specific to Bulma. A bulma.css/bulma.min.css stylesheet is equally conclusive when present (though bundled builds may inline it). The semantic component classes (navbar, hero, card) corroborate. The absence of framework JavaScript fits Bulma's pure-CSS nature. The weakest situation is a heavily customised build that renames or purges classes — uncommon, but there the stylesheet reference helps. As a rule, the is-/has- modifiers plus the columns grid confirm Bulma immediately.

What a Bulma build reveals about a developer

Finding Bulma signals a developer who valued clean, lightweight, no-JavaScript styling. Bulma's simplicity and readable class names make it popular for marketing sites, documentation, portfolios, landing pages and smaller or content-focused projects, as well as among developers who prefer a CSS-only framework over a JS-heavy component library. Its presence tells you the team prioritised simplicity and performance (no framework JS) over the comprehensive components of MUI or Ant Design. If you sell front-end tooling, design or development services, a Bulma site often indicates a smaller, pragmatic project or a developer who appreciates lean tooling — useful context for tailoring an approach. Because Bulma is CSS-only, the JavaScript layer (if any) is handled separately and worth checking to understand the full stack.

What finding Bulma means for sales, agencies and competitive research

For sales and prospecting, Bulma marks a pragmatic, often smaller project that values simplicity — useful context for front-end tooling, hosting, or development services aimed at lean teams and individual developers.

For agencies and consultants, finding Bulma tells you the client uses a lightweight CSS framework with no JS dependency, so engagements can focus on adding interactivity, modernising, or migrating to a component system if the project has grown. It signals a clean, maintainable starting point.

For competitive and market research, Bulma adoption indicates a lightweight, performance-conscious front-end approach. Spotting it (versus a heavy component library) suggests a simpler, content-focused or smaller build, useful when benchmarking complexity and performance.

Bulma in the wider front-end stack

Bulma sits in the styling layer and pairs with whatever the developer chooses for everything else. Because it is CSS-only, the JavaScript layer ranges from none (a static marketing site) to vanilla JS or a framework added separately. Bulma is common on static-site-generator builds (Hugo, Jekyll, Eleventy), documentation sites, and server-rendered apps that want clean styling without a component library. It is frequently loaded from a public CDN (jsDelivr, cdnjs). For an auditor, the valuable details are how Bulma is delivered (CDN versus bundled), whether the site adds any JavaScript framework on top, the site type (marketing, docs, app), and the hosting; together these reveal a pragmatic, lightweight front end with Bulma as the styling foundation.

A quick Bulma confirmation walkthrough

Open the site with developer tools on the Elements panel and inspect a grid section, navbar or button. Look for columns/column classes, semantic components like navbar or hero, and especially is-/has- modifier classes such as is-primary or has-text-centered. Switch to the Network tab or view the source and look for a bulma.css/bulma.min.css stylesheet, often from a public CDN. Confirm there is no component-library JavaScript, consistent with Bulma's pure-CSS nature. The is-/has- modifiers plus the columns grid are enough to confirm Bulma.

A quick Bulma detection checklist

• Inspect for the columns/column grid and semantic components (navbar, hero, card).
• Look for is-/has- modifier classes (is-primary, has-text-centered) — characteristic.
• Check the Network tab/source for a bulma.css/bulma.min.css stylesheet.
• Search the Elements panel for is- and column to confirm the pattern.
• Expect no Bulma JavaScript, since it is CSS-only.
• Distinguish Bulma (is-/has-, columns) from Bootstrap (btn, row/col) and Tailwind (utilities).

Detecting Bulma at scale

Checking one site is quick, but mapping CSS-framework adoption across many domains — to understand front-end approaches in a market — calls for automation. StackOptic detects Bulma and thousands of other technologies from a real browser, reading the rendered DOM and stylesheets. Because the CSS framework a site chooses correlates with its size, vintage and engineering style, a market-wide scan of frameworks is a quick way to segment a sector by technical approach — separating lean, content-focused builds on Bulma from heavier component-library applications, which is useful context whether you are prospecting, benchmarking competitors or sizing a redesign opportunity. For related reading, see our guides to telling if a website uses Tailwind CSS and Bootstrap, and the full Bulma technology profile.