Write, Run & Share Bulma CSS code online using OneCompiler's Bulma online editor for free. It's one of the robust, feature-rich online editors for Bulma CSS. Getting started with the OneCompiler's Bulma online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Bulma' and start writing code to learn and test online without worrying about tedious process of installation.
Bulma is a free, open-source CSS framework based on Flexbox. It provides ready-to-use frontend components that you can easily combine to build responsive web interfaces. Bulma is CSS-only with no JavaScript dependencies, making it lightweight and easy to integrate.
Bulma's column system is built entirely on Flexbox, automatically creating equal-width columns without any configuration needed. You can specify exact sizes using intuitive fractions like is-half or is-one-third, or use the 12-column grid system with classes like is-4 through is-12. The system supports responsive modifiers for different breakpoints, gap customization, and multiline wrapping for complex layouts that need to flow across multiple rows.
<!-- Basic columns (auto equal width) -->
<div class="columns">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
<!-- Sizes: is-half, is-one-third, is-one-quarter, is-two-thirds, is-three-quarters, is-1 to is-12 -->
<div class="columns">
<div class="column is-half">Half</div>
<div class="column is-one-quarter">Quarter</div>
<div class="column">Auto</div>
</div>
<!-- Responsive: is-*-mobile, is-*-tablet, is-*-desktop, is-*-widescreen -->
<div class="columns">
<div class="column is-full-mobile is-half-tablet is-one-third-desktop">
Responsive
</div>
</div>
<!-- Modifiers: is-multiline, is-gapless, is-variable is-* -->
<div class="columns is-multiline is-mobile">...</div>
<!-- Offset: is-offset-one-quarter, is-offset-*, etc. -->
Containers center your content horizontally and provide consistent maximum widths for optimal readability across screen sizes. Bulma offers multiple container sizes from small to widescreen, plus a fluid option that expands to fill available space. Typography helpers give you precise control over text size (1 being largest, 7 being smallest), alignment, transformation, and weight, all with responsive variants that let you adjust styling at different breakpoints.
<!-- Container: container, is-fluid, is-max-desktop, is-max-widescreen -->
<div class="container">Centered content</div>
<!-- Sizes: is-size-1 (3rem) to is-size-7 (0.75rem), responsive: is-size-*-mobile -->
<p class="is-size-4">Size 4 text</p>
<!-- Alignment: has-text-centered, has-text-left, has-text-right, has-text-justified -->
<!-- Transform: is-capitalized, is-lowercase, is-uppercase, is-italic -->
<!-- Weight: has-text-weight-light, has-text-weight-normal, has-text-weight-medium, has-text-weight-semibold, has-text-weight-bold -->
<p class="has-text-centered has-text-weight-bold">Centered bold text</p>
<!-- Titles -->
<h1 class="title is-1">Title</h1>
<h2 class="subtitle is-3">Subtitle</h2>
Bulma provides a semantic color system that applies consistently across text, backgrounds, and components throughout the framework. The primary colors include contextual options like success, warning, and danger for communicating meaning, plus neutral grays ranging from black to white. Each color has light and dark variants available, allowing you to create subtle backgrounds or emphasized text while maintaining visual harmony across your design.
<!-- Text: has-text-primary, has-text-link, has-text-info, has-text-success, has-text-warning, has-text-danger, has-text-black, has-text-dark, has-text-light, has-text-white, has-text-grey -->
<p class="has-text-primary">Primary text</p>
<!-- Background: has-background-primary, has-background-*-light, has-background-*-dark -->
<div class="has-background-info has-text-white">Info background</div>
Bulma buttons come with multiple semantic color options and style variations that can be combined to create exactly the button you need. Beyond colors, you can apply modifiers for outlined, inverted, rounded, or loading states to match your design requirements. Buttons support four size options from small to large, plus full-width expansion, and can be grouped together with optional addons styling for connected button sets like toolbars or split buttons.
<!-- Colors: button, is-primary, is-link, is-info, is-success, is-warning, is-danger -->
<button class="button is-primary">Primary</button>
<!-- Styles: is-light, is-outlined, is-inverted, is-rounded, is-loading -->
<button class="button is-success is-outlined">Outlined</button>
<!-- Sizes: is-small, (default), is-medium, is-large, is-fullwidth -->
<button class="button is-large">Large</button>
<!-- Button group: buttons, has-addons -->
<div class="buttons has-addons">
<button class="button">Left</button>
<button class="button is-primary">Center</button>
<button class="button">Right</button>
</div>
Cards are versatile container components designed for displaying grouped content like articles, products, or user profiles in a clean, bordered layout. Each card can optionally include an image section, content area for text and description, and a footer with action links. The card structure is intentionally flexible - all sections are optional, so you can build simple text cards or complex multi-section layouts depending on your needs.
<div class="card">
<div class="card-image">
<figure class="image is-4by3"><img src="image.jpg" alt="" /></figure>
</div>
<div class="card-content">
<p class="title is-4">Card Title</p>
<p class="subtitle is-6">Subtitle</p>
<div class="content">Card content here.</div>
</div>
<footer class="card-footer">
<a class="card-footer-item">Save</a>
<a class="card-footer-item">Delete</a>
</footer>
</div>
Bulma provides clean, modern form styling with a structured approach using field containers and control wrappers for consistent layout. The framework supports icon integration on both sides of inputs, color-coded validation states for success and error feedback, and various size options. Input addons let you attach buttons or text labels to inputs for search bars, currency inputs, or other combined controls.
<div class="field">
<label class="label">Name</label>
<div class="control has-icons-left">
<input class="input" type="text" placeholder="Enter name" />
<span class="icon is-small is-left"><i class="fas fa-user"></i></span>
</div>
</div>
<!-- Input modifiers: is-small, is-medium, is-large, is-primary, is-success, is-danger -->
<input class="input is-primary" type="text" />
<!-- Select -->
<div class="select">
<select>
<option>Option 1</option>
</select>
</div>
<!-- Textarea -->
<textarea class="textarea" placeholder="Message"></textarea>
<!-- Checkbox & Radio -->
<label class="checkbox"><input type="checkbox" /> Remember me</label>
<label class="radio"><input type="radio" name="q" /> Yes</label>
<!-- Addons -->
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Search" />
</div>
<div class="control"><button class="button is-info">Search</button></div>
</div>
Notifications are bold, colored block elements designed to capture user attention for important messages, alerts, or status updates. They span the full width of their container with generous padding to make the message stand out from surrounding content. Each notification can include an optional delete button for dismissal, and the light variant provides a softer background while maintaining the color theme.
<!-- Colors: notification, is-primary, is-link, is-info, is-success, is-warning, is-danger -->
<!-- Variants: is-light -->
<div class="notification is-success">
<button class="delete"></button>
Success notification
</div>
The navbar is a responsive horizontal navigation component that transforms into a mobile-friendly hamburger menu on smaller screens. It's structured with a brand section for logos and a menu section that contains navigation items, which can be positioned on the left or right. Dropdowns are natively supported with hover activation, and the entire navbar can be styled with theme colors or made transparent for overlay effects on hero sections.
<nav class="navbar" role="navigation">
<div class="navbar-brand">
<a class="navbar-item" href="#"><strong>Brand</strong></a>
<a class="navbar-burger" data-target="navMenu"
><span></span><span></span><span></span
></a>
</div>
<div id="navMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">Home</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">More</a>
<div class="navbar-dropdown">
<a class="navbar-item">About</a>
<hr class="navbar-divider" />
<a class="navbar-item">Contact</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item"><a class="button is-primary">Sign up</a></div>
</div>
</div>
</nav>
<!-- Colors: is-primary, is-dark, is-info, etc. -->
The hero component creates impactful full-width banner sections perfect for page headers, landing page introductions, or call-to-action areas. Heroes can be sized from small to fullheight (covering the entire viewport), and themed with any of Bulma's semantic colors for visual impact. The hero structure supports optional head and foot sections for navigation or additional content, with the main body section vertically centered for the primary message.
<!-- Colors: hero, is-primary, is-info, is-success, is-warning, is-danger, is-dark -->
<!-- Sizes: is-small, is-medium, is-large, is-fullheight -->
<section class="hero is-primary is-medium">
<div class="hero-body">
<p class="title">Hero Title</p>
<p class="subtitle">Hero subtitle</p>
</div>
</section>
Bulma includes a comprehensive set of additional UI components for building complete interfaces without custom styling. Tabs provide switchable content panels with various alignment and style options including boxed, toggle, and fullwidth variations. Modals create overlay dialogs for important interactions, dropdowns provide contextual menus, and progress bars visualize completion status. The box component offers a simple white container with shadow for grouping content.
<!-- Tabs: tabs, is-centered, is-right, is-boxed, is-toggle, is-fullwidth -->
<div class="tabs is-boxed">
<ul>
<li class="is-active"><a>Tab 1</a></li>
<li><a>Tab 2</a></li>
</ul>
</div>
<!-- Modal -->
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Title</p>
<button class="delete"></button>
</header>
<section class="modal-card-body">Content</section>
<footer class="modal-card-foot">
<button class="button is-success">Save</button>
</footer>
</div>
</div>
<!-- Breadcrumb: has-arrow-separator, has-bullet-separator, has-dot-separator -->
<nav class="breadcrumb">
<ul>
<li><a>Home</a></li>
<li class="is-active"><a>Current</a></li>
</ul>
</nav>
<!-- Dropdown -->
<div class="dropdown is-active">
<div class="dropdown-trigger"><button class="button">Dropdown</button></div>
<div class="dropdown-menu">
<div class="dropdown-content"><a class="dropdown-item">Item</a></div>
</div>
</div>
<!-- Progress: is-primary, is-success, etc., is-small, is-medium, is-large -->
<progress class="progress is-primary" value="50" max="100">50%</progress>
<!-- Box -->
<div class="box">A white box container</div>
Bulma provides a complete set of spacing and display helper classes for quick layout adjustments without writing custom CSS. The spacing system uses a scale from 0 to 6, with directional variants for margin and padding on all sides or specific edges. Display helpers control visibility and element behavior, with responsive variants that let you show or hide elements at specific breakpoints for tailored mobile and desktop experiences.
<!-- Margin: m-0 to m-6, mt-*, mr-*, mb-*, ml-*, mx-*, my-* -->
<!-- Padding: p-0 to p-6, pt-*, pr-*, pb-*, pl-*, px-*, py-* -->
<div class="mt-4 p-4">Margin top 4, padding 4</div>
<!-- Display: is-block, is-flex, is-inline, is-inline-block, is-hidden -->
<!-- Responsive: is-hidden-mobile, is-hidden-tablet, is-hidden-desktop -->
<div class="is-hidden-mobile">Hidden on mobile</div>