Bulma

What Is Bulma?

Bulma is a modern, open-source CSS framework built entirely on Flexbox that provides a responsive grid and a library of pre-styled components without shipping any JavaScript. The short answer for anyone asking what Bulma is: it is a popular, JavaScript-free alternative to Bootstrap, known for clean and readable class names, a Flexbox-based column system, and a design that looks modern out of the box. Because it is purely CSS, Bulma gives you the visual building blocks and leaves all interactivity to you, which makes it especially attractive to teams that want styling without being tied to a particular JavaScript stack.

Bulma was created by Jeremy Thomas (a designer at Algolia) and released in 2016. It arrived after Bootstrap and Foundation had defined the component-framework category, and it differentiated itself with two clear choices: a foundation built on Flexbox, and a deliberate decision to ship no JavaScript whatsoever. A precise, current market-share number is hard to state with confidence because detection surveys vary in methodology, so treat any single percentage cautiously. What technology-detection sources such as Wappalyzer and BuiltWith consistently report is that Bulma enjoyed strong, steady adoption among developers who wanted a lightweight, modern, framework-agnostic CSS toolkit, and that it is detected across a broad range of marketing sites, dashboards, and side projects.

Bulma's appeal is closely tied to its readability. Its class system uses plain-English, human-friendly names (columns, column, hero, box, button is-primary), which many developers find easier to learn and remember than more abbreviated conventions. That readability, combined with the no-JavaScript stance, is the core of Bulma's identity.

How Bulma Works

Bulma is delivered as a single CSS file (or a set of Sass modules you compile yourself) containing a Flexbox-based layout system and a catalog of styled components. There is no runtime, no JavaScript bundle, and no initialization step; you apply classes to your HTML and the styles take effect.

The column system is the heart of Bulma's layout. You wrap content in a columns container and place children in column elements; by default, columns share available space equally thanks to Flexbox. You control widths with size classes such as is-half, is-one-third, is-three-quarters, or numeric classes like is-4 (out of twelve). Responsive behavior comes from modifiers like is-half-tablet or is-full-mobile, and helpers like is-multiline, is-gapless, and is-centered fine-tune wrapping, spacing, and alignment. Because the system is pure Flexbox, columns are flexible and content-aware without any float clearing or JavaScript.

The component and element catalog covers the pieces most sites need. Bulma distinguishes between simple elements (buttons, the box, content, notification, tag, title, table, image helpers) and composed components (the navbar, card, dropdown, modal, tabs, menu, pagination, message, panel, and breadcrumb). Layout helpers like hero, section, container, level, and media structure pages at a higher level. A crucial detail is that components which would normally need scripting (the navbar's mobile toggle, the modal's open state, the dropdown's visibility, tab switching) are styled by Bulma but not wired up; Bulma exposes the necessary state classes (most notably is-active), and you toggle them with your own JavaScript. This is the practical consequence of Bulma being CSS-only.

Bulma leans heavily on modifier classes to express variation. Almost every component accepts is-* and has-* modifiers: is-primary, is-danger, is-light, is-large, is-rounded, is-outlined, has-text-centered, has-background-light, and many more. This consistent modifier vocabulary is part of why Bulma reads so cleanly and is also a reliable detection signature.

For customization, Bulma is authored in Sass and exposes its design decisions through variables (colors, spacing, typography, breakpoints). Teams can override these variables and import only the modules they use, compiling a smaller, themed stylesheet. A typical Bulma project either links the prebuilt CSS from a CDN for speed or compiles a custom Sass build to match a brand and trim unused parts.

How to Tell if a Website Uses Bulma

Bulma is one of the easier frameworks to detect because its class names are distinctive and it ships no JavaScript global to hide behind.

Signals in the page and network

• Stylesheet filename. In View Source or the Network tab, look for bulma.css or bulma.min.css. This is the canonical file the framework ships.
• CDN paths. Bulma is very commonly loaded from a CDN, so watch for paths such as cdn.jsdelivr.net/npm/bulma, cdnjs.cloudflare.com/ajax/libs/bulma/, or unpkg.com/bulma.
• Column class patterns. The combination of a columns container with column children, sized by classes like is-half or is-one-third, is a strong structural signal unique to Bulma.
• Distinctive component classes. Bulma-specific names such as hero, hero-body, navbar, navbar-burger, box, notification, tag, title, subtitle, and section frequently appear together.
• The is-* / has-* modifier vocabulary. Seeing button is-primary, is-active, is-large, has-text-centered, or has-background-light throughout the markup is a hallmark of Bulma.
• No framework JavaScript. Unlike Bootstrap or Foundation, there is no bulma.js and no window.Bulma global. The absence of framework JavaScript alongside the telltale classes is itself a confirming signal, because any interactivity will be custom.

Tools to confirm it

Tool	What you do	What it reveals
View Source	Open the page source in your browser	A bulma.min.css link and CDN path, with no matching framework JS
DevTools Elements	Inspect layout and components	columns/column with is-* sizes and classes like hero, navbar, box
DevTools Network	Filter requests by bulma	Shows the CSS file loading from a CDN or local path
DevTools Console	Check for a framework global	No Bulma object, consistent with a CSS-only framework
Wappalyzer	Run the browser extension on the page	Flags Bulma in the UI frameworks category
BuiltWith	Enter the domain on the BuiltWith site	Reports current and historical Bulma detection

For a structured method you can reuse on any framework, our guide on how to tell if a website uses Bootstrap walks through the same View Source, DevTools, and Wappalyzer workflow, which applies almost identically to Bulma. To confirm whether a site is running Bulma's defaults or a customized Sass theme, our guide on how to find what fonts and colors a website uses is the natural next step.

Key Features

Bulma's feature set is defined by Flexbox, readability, and its deliberate lack of JavaScript.

• Flexbox column system. A responsive, content-aware grid using columns and column with intuitive sizing and alignment helpers.
• No JavaScript dependency. Pure CSS with zero runtime, leaving all interactivity to your own scripts or framework.
• Readable, human-friendly class names. Plain-English classes and a consistent is-* / has-* modifier vocabulary that is easy to learn.
• Component and element catalog. Buttons, navbar, card, modal, dropdown, tabs, hero, box, notification, message, panel, pagination, and more.
• Modifier-driven theming. Color, size, and state variations expressed through composable modifier classes.
• Sass customization. Variables for colors, spacing, typography, and breakpoints, with modular imports for smaller builds.
• Framework-agnostic. Works equally well with React, Vue, Svelte, Angular, or plain HTML, since it imposes no JavaScript.
• Mobile-first responsive helpers. Breakpoint-specific modifiers control sizing and visibility across devices.

Two features are especially central to Bulma's identity. The no-JavaScript stance is not a limitation so much as a design decision: it keeps the framework small, avoids conflicts with application code, and lets the same CSS slot into any stack, which is why Bulma is so popular in component-framework projects where the JavaScript is handled elsewhere. And the readable class vocabulary lowers the learning curve dramatically; developers can often guess the right class name, and reviewers can understand a layout by reading the markup, both of which also make Bulma unusually easy to detect.

Pros and Cons

Bulma's trade-offs follow directly from being a modern, CSS-only framework.

Pros

• Pure CSS with no JavaScript, so it never conflicts with your application's scripts or framework.
• Clean, readable, easy-to-learn class names and a consistent modifier system.
• Modern, attractive default styling that looks good with little effort.
• Flexbox-based grid that is flexible and content-aware.
• Framework-agnostic, integrating cleanly with any JavaScript stack or none at all.
• Sass variables and modular imports for straightforward theming and trimming.

Cons

• No built-in JavaScript, so interactive components (navbar toggle, modal, dropdown, tabs) require your own code.
• Smaller ecosystem of themes, templates, and tutorials than Bootstrap.
• Fewer components than the largest frameworks, so complex UIs may need custom work.
• Without a build step or purge tool, the full CSS file ships more than a typical page uses.
• Project momentum has been quieter than the most actively marketed alternatives.

Bulma vs Alternatives

Bulma competes with other CSS frameworks, differentiated mainly by its Flexbox foundation and its lack of JavaScript. The table frames the landscape.

Framework	Styling model	JavaScript	Class style	Best for
Bulma	Components + Flexbox grid	None (CSS only)	Readable, is-*/has-* modifiers	Framework-agnostic, JS-free styling
Bootstrap	Components + grid	Vanilla JS (v5+)	Conventional, abbreviated	Fast, conventional sites with built-in JS
Tailwind CSS	Utility-first	None (CSS only)	Atomic utilities	Bespoke designs and design systems
Foundation	Components + grid	jQuery (classic)	Semantic, grid-focused	Accessible, customizable builds

The most instructive comparison is Bulma versus Bootstrap. Both offer a grid and a component catalog with themeable Sass variables, but they diverge on JavaScript and naming. Bootstrap bundles its own JavaScript so components like modals and dropdowns work out of the box, and it carries a far larger ecosystem of templates and tutorials. Bulma deliberately ships no JavaScript, which keeps it lightweight and conflict-free but means you supply interactivity yourself; its class names are also notably more readable. Teams that want batteries-included components tend toward Bootstrap, while teams that already have a JavaScript framework (and just want clean, modern CSS that stays out of the way) often prefer Bulma. Against Tailwind CSS, the contrast is sharper still: Tailwind gives you atomic utilities to compose any design, whereas Bulma gives you ready-made components, so the choice comes down to whether you want to assemble styles or apply them.

If you are deciding between the two most common component frameworks, our profile of Bootstrap details its signatures and trade-offs for direct comparison.

Use Cases

Bulma fits a recognizable set of scenarios, most centered on teams that want modern CSS without JavaScript entanglement.

• Single-page applications with their own JS. React, Vue, and Svelte projects that want styled components without a competing JavaScript layer.
• Marketing sites and landing pages. Projects that benefit from Bulma's attractive defaults and quick layout with the hero, section, and column helpers.
• Dashboards and admin panels. Internal tools that use Bulma's cards, tables, and navigation while handling interactivity in the app framework.
• Prototypes and side projects. Developers who value the gentle learning curve and readable classes for fast iteration.
• Framework-agnostic component libraries. Design systems that need a clean CSS base they can use across multiple tech stacks.

For competitive research and lead generation, detecting Bulma signals a particular engineering taste: a team that prefers a lightweight, modern, JavaScript-free CSS base and likely manages interactivity through a separate framework. That insight can help you understand how a prospect's front end is structured and where modernization or design support might add value.

Frequently Asked Questions

Does Bulma include any JavaScript?

No. Bulma is a pure CSS framework and ships zero JavaScript by design. It styles interactive components and exposes the state classes they need (such as is-active), but it does not wire up behavior. To make a navbar burger, modal, dropdown, or tabs functional, you toggle those classes with your own JavaScript or your framework's reactivity. This is exactly why Bulma integrates so cleanly with React, Vue, and other stacks.

How do I detect Bulma on a website?

Open View Source or the Network tab and look for bulma.css or bulma.min.css, often loaded from a CDN like jsDelivr or cdnjs. Then inspect the markup in DevTools for Bulma's distinctive classes: a columns container with column children sized by is-half or is-one-third, plus components like hero, navbar, box, and the pervasive is-* / has-* modifiers. The combination of those classes with no framework JavaScript file is a strong confirmation.

Is Bulma better than Bootstrap?

Neither is strictly better; they make different trade-offs. Bulma is lighter, ships no JavaScript, and has more readable class names, which suits teams that already have a JavaScript framework and want clean, modern CSS. Bootstrap includes its own JavaScript so components work out of the box, and it has a much larger ecosystem of templates, themes, and tutorials. Choose Bulma for framework-agnostic, JS-free styling; choose Bootstrap for batteries-included components and a bigger community.

Can I use Bulma with React or Vue?

Yes, and it is one of the most common ways Bulma is used. Because Bulma is CSS-only, there are no JavaScript conflicts with your framework. You apply Bulma's classes to your components and manage interactive state (like toggling is-active on a modal or dropdown) through React or Vue's own state handling. There are also community wrapper libraries that provide Bulma-styled components as React or Vue components if you prefer that ergonomics.

How do I customize Bulma's colors and styles?

Bulma is written in Sass and exposes its design tokens as variables. The recommended approach is to set up a Sass build, override variables such as the primary color, font family, spacing, or breakpoints before importing Bulma, and compile your own stylesheet. This also lets you import only the modules you use, producing a smaller CSS file. If you only need the prebuilt CSS, you can link it from a CDN, but that ships the full default theme.

Want to identify the CSS frameworks, libraries, and full technology stack behind any website instantly? Try StackOptic at https://stackoptic.com.