# Bulma CSS Framework
Bulma is a modern, open-source CSS framework based on Flexbox that provides a comprehensive collection of responsive components and utilities for building web interfaces. It is a pure CSS framework with no JavaScript dependencies, allowing developers to use it with any JavaScript framework or vanilla JavaScript. The framework follows a mobile-first approach and uses semantic HTML classes to create flexible, customizable layouts.
The framework is built with Sass and provides extensive customization through CSS variables and Sass variables. Bulma includes a complete set of UI components (buttons, cards, modals, navbars), form elements, grid systems (both columns and CSS Grid), layout helpers, and utility classes. Version 1.0.0 introduced a major rewrite using Dart Sass with CSS Variables, enabling CSS-only customization without Sass. It supports modern browsers through autoprefixer and offers multiple installation methods including npm, Yarn, CDN, and direct CSS imports. The framework also includes built-in dark mode support, color palettes for all primary colors, skeleton loaders, and optional class prefixing.
## Installation and Setup
### NPM Installation
```bash
npm install bulma
```
### Yarn Installation
```bash
yarn add bulma
```
### CDN Usage
```html
Bulma Example
Hello Bulma
```
### Import in CSS/Sass
```css
@import 'bulma/css/bulma.css';
```
### Custom Sass Import
```scss
@charset "utf-8";
// Import specific components
@use "bulma/sass/utilities";
@use "bulma/sass/base";
@use "bulma/sass/elements/button";
@use "bulma/sass/components/card";
```
### Alternative Versions
Bulma provides pre-built alternative versions for specific use cases:
```scss
// Version without dark mode support
@import 'bulma/css/versions/bulma-no-dark-mode.css';
// Version without helper classes (smaller file size)
@import 'bulma/css/versions/bulma-no-helpers.css';
// Version with prefixed classes (e.g., .bd-button instead of .button)
@import 'bulma/css/versions/bulma-prefixed.css';
// Prefixed version without helpers
@import 'bulma/css/versions/bulma-no-helpers-prefixed.css';
```
## CSS Variables and Theming
Since version 1.0.0, Bulma uses CSS Variables for easy customization without Sass:
```css
/* Override Bulma variables with CSS */
:root {
--bulma-primary-h: 171deg;
--bulma-primary-s: 100%;
--bulma-primary-l: 41%;
--bulma-family-sans-serif: "Nunito", sans-serif;
--bulma-radius: 0.5rem;
--bulma-size-1: 3.5rem;
}
/* Custom button styling */
.my-custom-button {
background-color: var(--bulma-primary);
color: var(--bulma-primary-invert);
border-radius: var(--bulma-radius);
}
```
## Dark Mode Support
Bulma includes built-in dark mode support that responds to system preferences:
```html
This adapts to dark mode automatically
```
To force a specific theme:
```css
/* Force light theme */
html {
color-scheme: light;
}
/* Force dark theme */
html {
color-scheme: dark;
}
```
## Button Component
```html
```
## Card Component
```html
Card Title
Card Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris.
Component
Card content goes here.
John Smith
@johnsmith
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card content
```
## Skeleton Loaders
Bulma includes skeleton loaders for content loading states:
```html
```
## Form Elements - Input and Textarea
```html
This email is valid
This field is required
```
## Grid System - Columns
```html
First column
Second column
Third column
Fourth column
is-half (50%)
Auto
is-one-third (33.33%)
Auto
is-one-quarter (25%)
Auto
is-4 (33.33%)
is-8 (66.66%)
is-3 (25%)
is-6 (50%)
is-3 (25%)
Responsive column
Auto
Centered column
25%
25%
25%
25%
50%
25%
25%
No gap
No gap
No gap
No gap
No gap
Gap 0.25rem
Gap 0.25rem
Gap 2rem
Gap 2rem
Mobile column
Mobile column
Mobile column
```
## CSS Grid System
Bulma also includes a modern CSS Grid system:
```html
John Smith @johnsmith 31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Barbara Middleton
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Like · Reply · 3 hrs
Sean Brown
Donec sollicitudin urna eget eros malesuada sagittis.
Like · Reply · 2 hrs
Kayli Eunice
Sed convallis scelerisque mauris, non pulvinar nunc mattis vel.
Like · Reply · 2 hrs
```
## Container and Section Layout
```html
This content is centered and has a maximum width
Container for widescreen and above
Container for fullhd screens
Container with max-width up to tablet
This container is fluid (no max-width)
Section
A simple container to divide your page into sections
Small Section
Medium Section
Large Section
Full Viewport Height Section
Hero Section
Content Section
Column 1
Column 2
```
## Utility Classes - Typography and Spacing
```html
Left aligned
Centered
Right aligned
Justified text
Primary text
Link text
Info text
Success text
Warning text
Danger text
Black text
White text
Light weight
Normal weight
Medium weight
Semibold weight
Bold weight
Extra bold weight
Size 1 (3rem)
Size 2 (2.5rem)
Size 3 (2rem)
Size 4 (1.5rem)
Size 5 (1.25rem)
Size 6 (1rem)
Size 7 (0.75rem)
Underlined text
Primary background
Link background
Info background
Success background
Warning background
Danger background
Current color text
Inherited color text
Current color background
Inherited color background
No margin
Margin 0.25rem
Margin 0.5rem
Margin 0.75rem
Margin 1rem
Margin 1.5rem
Margin 3rem
Auto margin
Margin top 1rem
Margin right 1rem
Margin bottom 1rem
Margin left 1rem
Margin horizontal 1rem
Margin vertical 1rem
No padding
Padding 1rem
Padding top 1rem
Padding horizontal 1.5rem
Padding vertical 0.75rem
Display block
Display flex
Display inline
Display inline-block
Centered with flexbox
Vertically centered
Hidden on mobile
Hidden on tablet
Hidden on desktop
```
## Sass Customization
```scss
// Override variables before importing Bulma
@charset "utf-8";
// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;
// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$control-border-width: 2px;
$input-radius: 0;
// Import Bulma
@use "bulma/sass";
// Add custom styles
.my-custom-class {
background-color: $primary;
padding: 1rem;
}
```
## Build Configuration
```json
{
"name": "my-bulma-project",
"scripts": {
"css-build": "sass --style=expanded --source-map styles.scss css/styles.css",
"css-watch": "sass --watch --style=expanded --source-map styles.scss css/styles.css"
},
"devDependencies": {
"sass": "^1.94.2",
"postcss-cli": "^11.0.1",
"cssnano": "^7.1.2"
},
"dependencies": {
"bulma": "^1.0.4"
}
}
```
## Summary
Bulma is designed for rapid web development with its extensive collection of pre-built components and utility classes. The framework is particularly well-suited for building responsive landing pages, admin dashboards, web applications, and marketing sites. Its pure CSS nature makes it framework-agnostic, allowing seamless integration with React, Vue, Angular, or vanilla JavaScript projects. Common use cases include creating card-based layouts for blogs or portfolios, building complex navigation systems with dropdowns, designing form-heavy applications with consistent styling, and implementing responsive grid layouts without writing custom CSS. Version 1.0.0's introduction of CSS Variables enables runtime theming and dark mode support, making Bulma more flexible than ever for modern web applications.
The framework's integration patterns are flexible and developer-friendly. For simple projects, include the CDN link and start using classes immediately. For production applications, install via npm/yarn and import only needed components to reduce bundle size. When customization is required, use CSS Variables for runtime changes or Sass variables for build-time customization to create branded themes. Bulma works exceptionally well with component-based JavaScript frameworks through wrapper libraries like Buefy (Vue), Bloomer (React), and rbx (React/TypeScript), or by directly applying classes to framework components. The framework's CSS-only architecture ensures no JavaScript conflicts and gives developers complete control over interactivity implementation. With built-in dark mode, skeleton loaders, responsive utilities, and extensive documentation, Bulma provides everything needed to build modern, accessible, and beautiful web interfaces.
