Bulma components changes

Besides its own components, the theme changes the look of many Bulma components. No markup change is needed: write Bulma’s markup, and the theme applies. This page lists these changes, to know what to expect, and why they were made.

Brand and defaults

Setting Value

Font

Nunito, loaded from Google Fonts.

Primary color

Navy blue, #0c214d.

Link color

Blue, #3760B3.

Dark grey / light grey

Brown #757763 / beige #e6c3a0.

Green, blue, red, info

Darker than the original "Lumen" theme colors the theme comes from, so that white text on them reaches the WCAG AA contrast ratio (4.5:1).

Radius

Smaller than Bulma’s: 0.25rem by default.

Shadows

Removed from boxes, cards and buttons: borders are used instead.

Controls

2px borders.

The thick bottom border

The signature of the theme is a thicker bottom border, giving a slight relief to the components: buttons, boxes, cards, notifications, messages, the navigation bar, file inputs, pagination links, kbd keys.

Its thickness is a CSS variable, --bulma-thickness, set to 4px on :root. It can be changed globally, or for a part of the page:

.sidebar {
  --bulma-thickness: 2px;
}

Buttons

  • Text is uppercase and bold.

  • The bottom border gets thinner on hover, so the button looks pressed.

  • Solid colored buttons (is-primary, is-danger…) get a border slightly darker than their background, and a colored halo when focused. Bulma’s other variants (is-outlined, is-inverted, is-text, is-light, is-soft…) keep Bulma’s colors.

  • Pagination links (pagination-link, pagination-previous, pagination-next) look like buttons.

Form controls

  • Inputs and text areas have a light inner shadow at the top, and a colored halo when focused, matching their color modifier.

  • <input type="number">: the padding hiding the increment buttons in Firefox is removed (Bulma issue #3318).

  • <select>: slightly adjusted padding, as it was cropped in Chrome.

  • Buttons, inputs and fieldsets in a .control cannot be higher than a control, so they align with each other.

  • A field has-addons with a single control keeps its rounded corners.

Cards, boxes and panels

  • Cards have no shadow, a border, and a very light tinted background. Their header has no shadow, only a bottom border.

  • Long words are broken in card-content, so a long name cannot overflow the card.

  • A panel-heading uses the theme colors (and keeps its rounded corners when it is the last child of the panel).

Modals

  • The title of a modal-card is kept on a single line, cut with an ellipsis.

  • The header and footer have more padding, and footer buttons are spaced.

Tabs and hero

  • The active tab has a thicker border, in the link color.

  • In an is-primary hero, the active boxed tab takes the page background color, so it looks connected to the content below.

  • A navbar inside a hero has no border, but a bottom shadow of the same thickness.

Accessibility

  • Keyboard focus: the theme removes Bulma’s focus shadow on buttons, so every focused element except form controls gets a visible outline when focused with the keyboard (:focus-visible).

  • Hoverable dropdowns (dropdown is-hoverable, navbar-item has-dropdown is-hoverable) also open when their trigger or one of their items has the focus, so they can be used with the keyboard.

  • Reduced motion: when the user asks the system to reduce motion, transitions are disabled.

  • Contrasts: see the darkened colors above, and the text color helpers.

Page

The body can scroll horizontally, so that a content too wide for the screen stays reachable instead of being cut.