# Bulma CSS — Complete Class Reference

Quick-lookup index of every Bulma class organized by category.

---

## Columns

### Container: `.columns`
| Class | Effect |
|-------|--------|
| `.is-mobile` | Activate columns on mobile |
| `.is-desktop` | Columns only from desktop up |
| `.is-multiline` | Allow wrapping |
| `.is-centered` | Center horizontally |
| `.is-vcentered` | Center vertically |
| `.is-gapless` | Remove gaps |
| `.is-variable` | Custom gap |
| `.is-0` – `.is-8` | Gap size (0–2rem) |

### Item: `.column`

**12-grid sizes:** `.is-1` `.is-2` `.is-3` `.is-4` `.is-5` `.is-6` `.is-7` `.is-8` `.is-9` `.is-10` `.is-11` `.is-12`

**Fractional sizes:** `.is-full` `.is-half` `.is-one-third` `.is-two-thirds` `.is-one-quarter` `.is-three-quarters` `.is-one-fifth` `.is-two-fifths` `.is-three-fifths` `.is-four-fifths`

**Offsets:** `.is-offset-1` – `.is-offset-11` + fractional offsets (`.is-offset-half`, `.is-offset-one-third`, etc.)

**Narrow:** `.is-narrow` `.is-narrow-mobile` `.is-narrow-tablet` `.is-narrow-desktop` `.is-narrow-widescreen` `.is-narrow-fullhd`

**Responsive:** all sizes accept breakpoint suffixes: `-mobile`, `-tablet`, `-desktop`, `-widescreen`, `-fullhd`

---

## Grid (v1.x)

### Smart Grid: `.grid`
Auto-sizing CSS Grid using `auto-fit`. Children use `.cell`.

CSS Variables:
- `--bulma-grid-gap` (default: `0.75rem`)
- `--bulma-grid-column-min` (default: `9rem`)
- `--bulma-grid-cell-column-span` (default: `1`)
- `--bulma-grid-cell-row-span` (default: `1`)

| Class | Effect |
|-------|--------|
| `.is-auto-fill` | Use `auto-fill` instead of `auto-fit` (keeps empty tracks) |
| `.is-col-min-0` – `.is-col-min-32` | Min column width (increments of 1.5rem, default `is-col-min-6` = 9rem) |
| `.is-gap-0` – `.is-gap-8` | Both column and row gap (increments of 0.5rem) |
| `.is-column-gap-0` – `.is-column-gap-8` | Horizontal gap only |
| `.is-row-gap-0` – `.is-row-gap-8` | Vertical gap only |

### Fixed Grid: `.fixed-grid`
Uses CSS container queries. Wraps `.grid`.

| Class | Effect |
|-------|--------|
| `.has-0-cols` – `.has-12-cols` | Fixed column count (default: 2) |
| `.has-{n}-cols-mobile` | Responsive column count at mobile |
| `.has-{n}-cols-tablet` | Responsive column count at tablet |
| `.has-{n}-cols-desktop` | Responsive column count at desktop |
| `.has-{n}-cols-widescreen` | Responsive column count at widescreen |
| `.has-{n}-cols-fullhd` | Responsive column count at fullhd |
| `.has-auto-count` | Auto columns: 2 mobile, 4 tablet, 8 desktop, 12 widescreen, 16 fullhd |

### Grid Cell: `.cell`
| Class | Effect |
|-------|--------|
| `.is-col-start-1` – `.is-col-start-12` | Column start position |
| `.is-col-span-1` – `.is-col-span-12` | Column span count |
| `.is-col-from-end-1` – `.is-col-from-end-12` | Column end position (from end) |
| `.is-row-start-1` – `.is-row-start-12` | Row start position |
| `.is-row-span-1` – `.is-row-span-12` | Row span count |
| `.is-row-from-end-1` – `.is-row-from-end-12` | Row end position (from end) |

All cell classes accept breakpoint suffixes: `-mobile`, `-tablet`, `-desktop`, `-widescreen`, `-fullhd`

### Grid vs Columns Comparison
| Feature | Smart Grid (`.grid`) | Fixed Grid (`.fixed-grid > .grid`) | Columns (`.columns`) |
|---------|-----|-----|-----|
| CSS Layout | CSS Grid | CSS Grid | Flexbox |
| Column count | Automatic (auto-fit) | Explicit (has-N-cols) | Manual per-column |
| 2D layout | Yes | Yes | No (single axis) |
| Gap control | 0.5rem increments | Same as smart grid | 0.25rem increments |

---

## Skeletons (v1.x)

| Class | Target | Effect |
|-------|--------|--------|
| `.skeleton-block` | standalone `<div>` | Rectangular loading placeholder |
| `.skeleton-lines` | container with child `<div>`s | Multiple line placeholders |
| `.is-skeleton` | any supported element | Transforms element into loading state |
| `.has-skeleton` | `.title`, `.subtitle` | Skeleton on content only |

Supported on: button, icon, image (all sizes), input, textarea, notification, tag, title, subtitle, media children.

---

## Elements

### `.block`
Spacer element. No modifiers.

### `.box`
White container with shadow. No modifiers.

### `.button`
| Category | Classes |
|----------|---------|
| **Colors** | `.is-white` `.is-light` `.is-dark` `.is-black` `.is-text` `.is-ghost` `.is-primary` `.is-link` `.is-info` `.is-success` `.is-warning` `.is-danger` |
| **Sizes** | `.is-small` `.is-normal` `.is-medium` `.is-large` `.is-responsive` |
| **Styles** | `.is-outlined` `.is-inverted` `.is-rounded` `.is-fullwidth` |
| **States** | `.is-hovered` `.is-focused` `.is-active` `.is-loading` `.is-static` `[disabled]` |
| **Light/Dark** | Combine color + `.is-light` or `.is-dark` |

### `.buttons` (group container)
| Class | Effect |
|-------|--------|
| `.has-addons` | Attach buttons together |
| `.is-centered` | Center group |
| `.is-right` | Right-align group |
| `.are-small` `.are-medium` `.are-large` | Group sizing |

### `.content`
| Class | Effect |
|-------|--------|
| `.is-small` `.is-normal` `.is-medium` `.is-large` | Text size |
| `.is-lower-alpha` `.is-lower-roman` `.is-upper-alpha` `.is-upper-roman` | List styles |

### `.delete`
Sizes: `.is-small` `.is-medium` `.is-large`

### `.icon`
Sizes: `.is-small` `.is-medium` `.is-large`
Combo: `.icon-text` for inline icon + text

### `.image`
| Category | Classes |
|----------|---------|
| **Fixed** | `.is-16x16` `.is-24x24` `.is-32x32` `.is-48x48` `.is-64x64` `.is-96x96` `.is-128x128` |
| **Ratios** | `.is-square` `.is-1by1` `.is-5by4` `.is-4by3` `.is-3by2` `.is-5by3` `.is-16by9` `.is-2by1` `.is-3by1` `.is-4by5` `.is-3by4` `.is-2by3` `.is-3by5` `.is-9by16` `.is-1by2` `.is-1by3` |
| **Modifiers** | `.is-rounded` `.is-fullwidth` `.has-ratio` |

### `.notification`
Colors: `.is-primary` `.is-link` `.is-info` `.is-success` `.is-warning` `.is-danger` + `.is-light` variants

### `.progress`
Colors: `.is-primary` `.is-link` `.is-info` `.is-success` `.is-warning` `.is-danger` `.is-dark`
Sizes: `.is-small` `.is-normal` `.is-medium` `.is-large`

### `.table`
| Class | Effect |
|-------|--------|
| `.is-bordered` | Add borders |
| `.is-striped` | Alternating rows |
| `.is-narrow` | Compact rows |
| `.is-hoverable` | Highlight on hover |
| `.is-fullwidth` | Full width |
| `.is-selected` | Highlight row (on `<tr>`) |
Wrap in `.table-container` for horizontal scroll.

### `.tag`
| Category | Classes |
|----------|---------|
| **Colors** | `.is-black` `.is-dark` `.is-light` `.is-white` `.is-primary` `.is-link` `.is-info` `.is-success` `.is-warning` `.is-danger` + `.is-light` |
| **Sizes** | `.is-normal` `.is-medium` `.is-large` |
| **Styles** | `.is-rounded` `.is-delete` `.is-hoverable` |

### `.tags` (group container)
`.are-medium` `.are-large` `.has-addons`

### `.title` / `.subtitle`
Sizes: `.is-1` through `.is-6`. Modifier: `.is-spaced` (on `.title`).

---

## Components

### `.breadcrumb`
| Class | Effect |
|-------|--------|
| `.is-centered` `.is-right` | Alignment |
| `.has-arrow-separator` `.has-bullet-separator` `.has-dot-separator` `.has-succeeds-separator` | Separators |
| `.is-small` `.is-medium` `.is-large` | Sizes |
| `.is-active` (on `<li>`) | Current page |

### `.card`
Parts: `.card-header` `.card-header-title` `.card-header-icon` `.card-image` `.card-content` `.card-footer` `.card-footer-item`

### `.dropdown`
| Class | Target | Effect |
|-------|--------|--------|
| `.is-active` | `.dropdown` | Show dropdown |
| `.is-hoverable` | `.dropdown` | Show on hover |
| `.is-right` | `.dropdown` | Align right |
| `.is-up` | `.dropdown` | Open upward |

Parts: `.dropdown-trigger` `.dropdown-menu` `.dropdown-content` `.dropdown-item` `.dropdown-divider`

### `.menu`
Parts: `.menu-label` `.menu-list`. State: `.is-active` on items.

### `.message`
| Category | Classes |
|----------|---------|
| **Colors** | `.is-dark` `.is-primary` `.is-link` `.is-info` `.is-success` `.is-warning` `.is-danger` |
| **Sizes** | `.is-small` `.is-medium` `.is-large` |

Parts: `.message-header` `.message-body`

### `.modal`
| Class | Target | Effect |
|-------|--------|--------|
| `.is-active` | `.modal` | Show modal |
| `.is-large` | `.modal-close` | Large close button |

Parts: `.modal-background` `.modal-content` `.modal-close` `.modal-card` `.modal-card-head` `.modal-card-title` `.modal-card-body` `.modal-card-foot`

### `.navbar`
| Class | Target | Effect |
|-------|--------|--------|
| `.is-transparent` | `.navbar` | Transparent background |
| `.is-fixed-top` | `.navbar` | Fix to top |
| `.is-fixed-bottom` | `.navbar` | Fix to bottom |
| `.is-spaced` | `.navbar` | Extra padding |
| `.has-shadow` | `.navbar` | Bottom shadow |
| `.is-active` | `.navbar-menu` | Show mobile menu |
| `.is-active` | `.navbar-burger` | Animate burger |
| `.has-dropdown` | `.navbar-item` | Has dropdown |
| `.is-hoverable` | `.navbar-item` | Hover-activated dropdown |
| `.is-expanded` | `.navbar-item` | Full width |
| `.is-tab` | `.navbar-item` | Tab style |
| `.is-arrowless` | `.navbar-link` | Hide dropdown arrow |
| `.is-right` | `.navbar-dropdown` | Right-align |
| `.is-boxed` | `.navbar-dropdown` | Boxed style |
| `.has-dropdown-up` | `.navbar-item` | Open upward |

Colors: all semantic colors. Body helpers: `.has-navbar-fixed-top` `.has-navbar-fixed-bottom`

Parts: `.navbar-brand` `.navbar-burger` `.navbar-menu` `.navbar-start` `.navbar-end` `.navbar-item` `.navbar-link` `.navbar-dropdown` `.navbar-divider`

### `.pagination`
| Class | Effect |
|-------|--------|
| `.is-centered` `.is-right` | Alignment |
| `.is-rounded` | Rounded style |
| `.is-small` `.is-medium` `.is-large` | Sizes |
| `.is-current` | Current page (on link) |
| `.is-disabled` | Disabled state |

Parts: `.pagination-previous` `.pagination-next` `.pagination-list` `.pagination-link` `.pagination-ellipsis`

### `.panel`
Colors: `.is-primary` `.is-link` `.is-info` `.is-success` `.is-warning` `.is-danger`
Parts: `.panel-heading` `.panel-tabs` `.panel-block` `.panel-icon`

### `.tabs`
| Class | Effect |
|-------|--------|
| `.is-centered` `.is-right` | Alignment |
| `.is-boxed` | Boxed style |
| `.is-toggle` | Toggle style |
| `.is-toggle-rounded` | Rounded toggle |
| `.is-fullwidth` | Full width |
| `.is-small` `.is-medium` `.is-large` | Sizes |
| `.is-active` (on `<li>`) | Active tab |

---

## Form Controls

### `.field`
| Class | Effect |
|-------|--------|
| `.is-grouped` | Group controls inline |
| `.is-grouped-centered` | Center grouped |
| `.is-grouped-right` | Right-align grouped |
| `.is-grouped-multiline` | Multiline grouped |
| `.has-addons` | Attach controls |
| `.has-addons-centered` `.has-addons-right` | Align addons |
| `.is-horizontal` | Horizontal layout |

Horizontal parts: `.field-label` (sizes: `.is-small` `.is-normal` `.is-medium` `.is-large`), `.field-body`

### `.control`
| Class | Effect |
|-------|--------|
| `.has-icons-left` | Left icon slot |
| `.has-icons-right` | Right icon slot |
| `.is-expanded` | Fill available space |
| `.is-loading` | Loading spinner |

### `.input`
Colors: `.is-primary` `.is-link` `.is-info` `.is-success` `.is-warning` `.is-danger`
Sizes: `.is-small` `.is-normal` `.is-medium` `.is-large`
Styles: `.is-rounded` `.is-static`
States: `.is-hovered` `.is-focused`

### `.textarea`
Colors, sizes, states same as `.input`. Extra: `.has-fixed-size`

### `.select`
Colors, sizes same as `.input`. Extra: `.is-rounded` `.is-multiple` `.is-loading`

### `.checkbox` / `.radio`
Label wrappers. Groups: `.checkboxes` `.radios`

### `.file`
| Class | Effect |
|-------|--------|
| `.has-name` | Show file name |
| `.is-right` | Name on left |
| `.is-fullwidth` | Full width |
| `.is-boxed` | Boxed style |
| `.is-centered` | Center |

Colors and sizes supported. Parts: `.file-label` `.file-input` `.file-cta` `.file-icon` `.file-name`

### `.label`
Sizes: `.is-small` `.is-normal` `.is-medium` `.is-large`

### `.help`
Colors: `.is-primary` `.is-link` `.is-info` `.is-success` `.is-warning` `.is-danger`

---

## Layout

### `.container`
| Class | Effect |
|-------|--------|
| `.is-widescreen` | Max-width at widescreen |
| `.is-fullhd` | Max-width at fullhd |
| `.is-max-desktop` | Cap at desktop |
| `.is-max-widescreen` | Cap at widescreen |
| `.is-max-tablet` | Cap at tablet |
| `.is-fluid` | Full width + 32px margin |

### `.hero`
Colors: all semantic colors.
Sizes: `.is-small` `.is-medium` `.is-large` `.is-halfheight` `.is-fullheight` `.is-fullheight-with-navbar`
Parts: `.hero-head` `.hero-body` `.hero-foot`

### `.section`
Sizes: `.is-medium` `.is-large`

### `.level`
Modifier: `.is-mobile`. Parts: `.level-left` `.level-right` `.level-item`

### `.media`
Parts: `.media-left` `.media-content` `.media-right`. Supports 3-level nesting.

### `.footer`
No modifiers.

---

## Helper Classes

### Spacing
Pattern: `{m|p}{t|r|b|l|x|y}-{0|1|2|3|4|5|6|auto}`

| Value | Size |
|-------|------|
| `0` | 0 |
| `1` | 0.25rem |
| `2` | 0.5rem |
| `3` | 0.75rem |
| `4` | 1rem |
| `5` | 1.5rem |
| `6` | 3rem |
| `auto` | auto (margin only) |

### Typography
| Class | Effect |
|-------|--------|
| `is-size-1` – `is-size-7` | Font size (3rem – 0.75rem) |
| `is-size-{1-7}-{breakpoint}` | Responsive size |
| `has-text-centered` | Center text |
| `has-text-left` | Left align |
| `has-text-right` | Right align |
| `has-text-justified` | Justify |
| `has-text-weight-light` | Weight 300 |
| `has-text-weight-normal` | Weight 400 |
| `has-text-weight-medium` | Weight 500 |
| `has-text-weight-semibold` | Weight 600 |
| `has-text-weight-bold` | Weight 700 |
| `has-text-weight-extrabold` | Weight 800 |
| `is-capitalized` | text-transform: capitalize |
| `is-lowercase` | text-transform: lowercase |
| `is-uppercase` | text-transform: uppercase |
| `is-italic` | font-style: italic |
| `is-underlined` | text-decoration: underline |
| `is-family-sans-serif` | Sans-serif font |
| `is-family-monospace` | Monospace font |
| `is-family-primary` | Primary font |
| `is-family-secondary` | Secondary font |
| `is-family-code` | Code font |

### Colors
| Pattern | Example |
|---------|---------|
| `has-text-{color}` | `has-text-primary` |
| `has-text-{color}-light` | `has-text-primary-light` |
| `has-text-{color}-dark` | `has-text-primary-dark` |
| `has-background-{color}` | `has-background-info` |
| `has-background-{color}-light` | `has-background-warning-light` |
| `has-text-grey` | Grey shades |
| `has-text-{color}-{00-100}` | Palette shades (v1) |

### Visibility
| Class | Effect |
|-------|--------|
| `is-block` | display: block |
| `is-flex` | display: flex |
| `is-inline` | display: inline |
| `is-inline-block` | display: inline-block |
| `is-inline-flex` | display: inline-flex |
| `is-hidden` | display: none |
| `is-invisible` | visibility: hidden |
| `is-sr-only` | Screen reader only |

All display classes + `is-hidden` accept breakpoint suffixes: `-mobile`, `-tablet-only`, `-desktop-only`, `-widescreen-only`, `-touch`, `-tablet`, `-desktop`, `-widescreen`, `-fullhd`

### Flexbox
| Category | Classes |
|----------|---------|
| **Direction** | `is-flex-direction-row` `-row-reverse` `-column` `-column-reverse` |
| **Wrap** | `is-flex-wrap-nowrap` `-wrap` `-wrap-reverse` |
| **Justify** | `is-justify-content-flex-start` `-flex-end` `-center` `-space-between` `-space-around` `-space-evenly` |
| **Align Items** | `is-align-items-stretch` `-flex-start` `-flex-end` `-center` `-baseline` |
| **Align Self** | `is-align-self-auto` `-flex-start` `-flex-end` `-center` `-baseline` `-stretch` |
| **Grow** | `is-flex-grow-0` through `is-flex-grow-5` |
| **Shrink** | `is-flex-shrink-0` through `is-flex-shrink-5` |

### Other
| Class | Effect |
|-------|--------|
| `is-clearfix` | Clear floats |
| `is-pulled-left` | Float left |
| `is-pulled-right` | Float right |
| `is-overlay` | Cover positioned parent |
| `is-clipped` | overflow: hidden |
| `is-radiusless` | Remove border-radius |
| `is-shadowless` | Remove box-shadow |
| `is-unselectable` | Prevent text selection |
| `is-clickable` | cursor: pointer |
| `is-relative` | position: relative |