bulma Documentation

Technical Documentation: jgthms/bulma

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (README.md) Copy Section

[Bulma](https://bulma.io)

Bulma is a modern CSS framework based on Flexbox.

Quick install Copy Chapter

Bulma is constantly in development! Try it out now:

NPM Copy Section

npm install bulma

or

Yarn Copy Section

yarn add bulma

Bower Copy Section

bower install bulma

Import Copy Section

After installation, you can import the CSS file into your project using this snippet:

@import 'bulma/css/bulma.css'

CDN Copy Section

https://www.jsdelivr.com/package/npm/bulma

Feel free to raise an issue or submit a pull request.

CSS only Copy Chapter

Bulma is a CSS framework. As such, the sole output is a single CSS file: bulma.css

You can either use that file, "out of the box", or download the Sass source files to customize the variables.

There is no JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered "environment agnostic": it's just the style layer on top of the logic.

Browser Support Copy Chapter

Bulma uses autoprefixer to make (most) Flexbox features compatible with earlier browser versions. According to Can I use, Bulma is compatible with recent versions of:

• Chrome
• Edge
• Firefox
• Opera
• Safari

Internet Explorer (10+) is only partially supported.

Documentation Copy Chapter

The documentation resides in the docs directory, and is built with the Ruby-based Jekyll tool.

Browse the online documentation here.

Related projects Copy Chapter

Browser testing via

Copyright and license Copy Chapter

Code copyright 2023 Jeremy Thomas. Code released under the MIT license.

README (`docs/README.md`) Copy Section

Building the documentation Copy Chapter

The documentation HTML is produced with the Ruby-based jekyll tool.

1. Make sure Ruby 2.x is installed.
2. gem install jekyll if jekyll is not already installed.

Note: If you are an Ubuntu user, make sure ruby2.x-dev is installed.

Viewing the documentation locally Copy Chapter

To view the documentation on your system locally:

Setup Copy Section

1. cd into docs/ directory
2. Copy the config file, cp _config.yml _config.local.yml
3. Edit _config.local.yml and change the url: value to http://localhost:4000. This local config file will be ignored by git.

Run Jekyll Copy Section

1. In a separate shell session, cd to the docs/ directory, and do:

jekyll serve --incremental --config _config.local.yml

This will start an HTTP server at http://localhost:4000/ that serves the docs built in the _site directory; and anytime the docs are rebuilt by you, it will serve the docs site on the fly. You can also add the --open-url option (or its alias --o) to automatically open the server URL in your default browser when it's ready.

In your main shell session where you develop, if you change anything in docs/ the jekyll server will rebuild those on the fly. But if you change anything about the Bulma SASS or CSS, you need to do npm run start to build the docs' CSS before you will see it in the browser. The process running jekyll serve will pick up the new CSS automatically.

React Bulma Customizer README (`docs/_react/bulma-customizer/README.md`) Copy Section

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Posts 2016 02 09 Blog Launched New Responsive Columns New Helpers (`docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md`) Copy Section

layout: post title: "Blog launched, new responsive columns, new helpers" introduction: "Stay updated with everything that's coming up with Bulma" long_introduction: "First blog post on the newly launched blog! It even has its own [RSS feed](/atom.xml) for those who still use that. This blog will be more frequently updated than the [newsletter](#newsletter), so you can subscribe to either or both, as they will be used for different purposes." color: "danger" name: "Launch!" icon: "rocket" Copy Chapter

First blog post on the newly launched blog! It even has its own RSS feed for those who still use that. This blog will be more frequently updated than the newsletter, so you can subscribe to either or both, as they will be used for different purposes.

Columns on mobile too Copy Section

By default, columns are only activated on tablet and desktop. If you want to use columns on mobile too, add the is-mobile modifier on the columns container.

{% highlight html %}

{% endhighlight %}

Responsive columns Copy Section

You can now apply different column size for each breakpoint.

For example, let's say you want a column to take half the width on mobile, a third on tablet, and a quarter on desktop:

`is-half-mobile`
  `is-one-third-tablet`
  `is-one-quarter-desktop`



1


1


1


1

{% highlight html %}

{% endhighlight %}

Info


If you use **mobile** modifiers on single `column` elements, make sure to use the `is-mobile` modifier on the `columns` container.

Multiline columns Copy Section

By default, if you want to start a new row, you just need to close a columns container and open a new one.

But you can also add the is-multiline modifier on the columns container, and use column size modifiers (like is-half or is-3) to define size on multiple rows within the same container.

`is-one-quarter`


`is-one-quarter`


`is-one-quarter`


`is-one-quarter`


`is-half`


`is-one-quarter`


`is-one-quarter`


`is-one-quarter`


Auto

{% highlight html %}

{% endhighlight %}

Helpers section Copy Section

While modifiers are specific to each Bulma element, helpers are general utility classes that can be applied on almost any element. Check out the new helpers documentation!

Posts 2016 04 11 Metro Ui Css Grid With Bulma Tiles (`docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md`) Copy Section

layout: post title: "Metro UI CSS grid with Bulma tiles" introduction: "Build a **Metro-UI-like grid in CSS** with the new `tile` element" long_introduction: "Have you ever wanted to build a **Metro-UI-like grid in CSS**?Thanks to Flexbox and the new [Bulma tiles](https://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element." color: "info" name: "Metro UI" icon: "th-large" Copy Chapter

Have you ever wanted to build a Metro-UI-like grid in CSS?
Thanks to Flexbox and the new Bulma tiles, you now can! And it only requires 1 HTML element: the tile element.

Check out the documentation!

Posts 2017 03 10 New Field Element (`docs/_posts/2017-03-10-new-field-element.md`) Copy Section

layout: post title: "New field element (for better controls)" published: true introduction: "A new versatile container for form controls" long_introduction: "The `.control` element has been a very versatile container for form controls. But it came at a cost: it was difficult to combine its **block** characteristics with its **inline** variations." color: "success" name: "Field element" icon: "square" icon_regular: true Copy Chapter

TL;DR: there's a new .field container, and .control has been re-purposed.

Since the beginning, the .control has been a very versatile element that allowed:

• to space controls vertically
• to include an icon alongside inputs, buttons, textareas...
• to append a loading spinner
• to create horizontal forms
• to create control addons
• to create control groups

The problem Copy Chapter

The .control element acted as both a block container (for spacing, for other controls in a horizontal form), but also an inline container (for adding an icon, a loader, an addon, and grouping).
It led to issues where you couldn't:

• add a help text horizontally
• add multiple icons or loaders in a group of controls
• add a different icon on addons

The solution Copy Chapter

The new .field element becomes the block container for .control elements. As a result, it inherits the .has-addons, .is-grouped, and .is-horizontal modifiers.

Furthermore .control element can only contain a .button, .input, .select, or .textarea, and eventually a .icon. It can no longer contain a .help element or other .control.

But it allows more elaborate designs.

{% highlight sass %}
// Before
.control
.has-addons
.has-icon
.is-grouped
.is-horizontal
.is-loading

// After
.control
.has-icon
.is-loading
.field
.has-addons
.is-grouped
.is-horizontal
.field-label
.field-body
{% endhighlight %}

{% highlight html %}

Username

This username is available

Username

This username is available

{% endhighlight %}

Examples Copy Chapter

Addons with multiple icons or states.

Horizontal form with help text

<label class="label">From</label>



  
    
  


  
    
    
      
    
  
  This email is correct

Posts 2017 07 24 Access Previous Bulma Versions (`docs/_posts/2017-07-24-access-previous-bulma-versions.md`) Copy Section

layout: post title: "Access previous Bulma versions" introduction: "It is now possible to **access previous versions** of Bulma" long_introduction: "It is now possible to **access previous versions** of Bulma. Just head towards: [http://versions.bulma.io/](http://versions.bulma.io/)" color: "primary" name: "Versions" icon: "undo" Copy Chapter

It is now possible to access previous versions of Bulma. Just head towards: http://versions.bulma.io/

While only version 0.4.4 is accessible now, each new release will remain available forever.

Posts 2017 08 01 Bulma Bootstrap Comparison (`docs/_posts/2017-08-01-bulma-bootstrap-comparison.md`) Copy Section

layout: post title: "Bulma / Bootstrap comparison" introduction: "New page \"Alternative to Bootstrap\"" long_introduction: "If you're unsure _how_ or _why_ you should try out Bulma if you're familiar to Bootstrap, the new page [\"Alternative to Bootstrap\"](https://bulma.io/alternative-to-bootstrap/) tries to help you answer questions you might have." color: "bootstrap" name: "Bulma over Bootstrap?" icon: "heart" Copy Chapter

Bulma has always been a Bootstrap fan, inspired by its goal and purpose.

Some users ask why they should use Bulma over Bootstrap, and there is no definite answer, because while both CSS frameworks share similarities, they also differ in many ways.

The new page "Alternative to Bootstrap" draws a feature comparison to help undecided users choose the right tool for their web design needs, which can be either Bulma or Bootstrap.

Posts 2017 08 03 List Of Tags (`docs/_posts/2017-08-03-list-of-tags.md`) Copy Section

layout: post title: "New feature: list of tags" introduction: "What's better than one tag? Multiple tags!" color: "success" name: "List of tags" icon: "tag" Copy Chapter

The tag is a small but useful element that can be used in many contexts, to enhance the meaning of the text it's attached to.

A tag rarely comes on its own though, so Bulma now supports list of tags. The same way you can group controls, you can now group tags together to form a list that can span multiple lines.

As a bonus, there is also a delete tag available!

Posts 2017 10 09 Roses Are Red Links Are Blue (`docs/_posts/2017-10-09-roses-are-red-links-are-blue.md`) Copy Section

layout: post title: "Roses are red – Links are blue" introduction: "What's better than one tag? Multiple tags!" color: "link" name: "Roses are red and links are blue" icon: "link" Copy Chapter

By default, a browser will display links in blue. Bulma has up until now used the $primary color as the $link color:

// Old styles
$link: $primary !default

But the primary color is mostly used as the brand color, and is not necessarily well suited for links. For readability purposes, and to add more flexibility to your design choices:

• the $link color defaults to $blue
• $info is using the new $cyan color
• $link has been added to the $colors map as well

// New styles
$link: $blue !default
$info: $cyan !default

Deprecation warning



  Because the modifier `is-link` for **buttons** already existed, it has been renamed to `is-text`.

As such, the following components are now blue:

• breadcrumb
• dropdown
• navbar
• pagination
• tabs
• menu
• panel

All Bulma elements and components that support color modifiers now support the .is-link color:

<div class="notification is-link">
  Link notification.
</div>

<div class="notification is-info">
  Info notification.
</div>

<button class="button is-link">
  Link button
</button>

<button class="button is-info">
  Info button
</button>

Link notification.

Info notification.

Link button

Info button

If you want to use the $primary color for your links, just customize your Bulma setup by including these rules:

$link: $primary !default
$link-invert: $primary-invert !default
$link-focus-border: $primary !default

Posts 2017 10 22 List Of Buttons (`docs/_posts/2017-10-22-list-of-buttons.md`) Copy Section

layout: post title: "New feature: list of buttons" introduction: "What's better than one button? Multiple buttons!" color: "danger" name: "List of buttons" icon: "hand-pointer" Copy Chapter

Similarly to the list of tags launched a few months ago, the button has its own list of buttons:

Although you could already group buttons by using from groups, this new buttons class makes everything easier.

Posts 2017 11 01 Fixed Navbar (`docs/_posts/2017-11-01-fixed-navbar.md`) Copy Section

layout: post title: "New feature: fixed navbar" introduction: "Fix your navbar at the top or bottom" color: "success" name: "Fixed navbar" icon: "map-pin" Copy Chapter

You can now fix a navbar to the top or the bottom:

Check it out!

As a added bonus, the bottom navbar required a new dropup feature which has also been implemented!

Posts 2017 11 14 Bulma Is On Patreon (`docs/_posts/2017-11-14-bulma-is-on-patreon.md`) Copy Section

title: "Bulma is on Patreon!" layout: post introduction: "Support Bulma's future" color: "patreon" name: "Bulma on Patreon" icon: "patreon" icon_brand: true Copy Chapter

Bulma has now its own Patreon page:

This will allow people to easily support Bulma, and ensure its future development.

Posts 2018 01 18 Bulma Supports Font Awesome 5 (`docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md`) Copy Section

title: "Bulma supports Font Awesome 5" layout: post introduction: "No change required!" color: "info" name: "Font Awesome 5" icon: "font-awesome" icon_brand: true Copy Chapter

Bulma is icon library agnostic: this means that you can use any icon font library (like Font Awesome 4 or 5, Material Design Icons, Ionicons…) with Bulma's icon class.

As a result, Bulma already supports Font Awesome 5! 😃

Since the icon element is simply a container for any icon font *allowing the layout to reserve a spot for the icon while it loads), it supports any size of Font Awesome 4 and 5.

For the sake of being in sync with Bulma users, I've recently updated the website to actually use Font Awesome 5! The process of migrating from Font Awesome 4 to 5 is straightforward. You simply need to:

1. include Font Awesome 5 instead, using the script tag
2. replace fa classes with their fas and fab equivalents

That's it!

Check out the icon documentation.

Posts 2018 04 13 Website Redesign (`docs/_posts/2018-04-13-website-redesign.md`) Copy Section

title: "Website redesign: clearer layout, easier navigation, better content, and much more!" layout: post introduction: "A brand new look" color: "expo" name: "Website redesign" icon: "star" featured: true image: "9-OCsKoyQlk" alt: "Swimming pool" Copy Chapter

The Bulma website has been widely redesigned! There's been a lot of work, to say the least:

Just see for yourself!

Before
<a href="{{ site.url }}/images/blog/v7/before.png">
  
</a>


After
<a href="{{ site.url }}/images/blog/v7/after.png">
  
</a>

{% include docs/elements/anchor.html name="Navbar" %}

The navbar has been updated with a lighter markup and cleaner design:

This doesn't affect the current navbars. There's actually a new modifier called is-spaced that was created for this new navbar. Documentation coming soon!

{% include docs/elements/anchor.html name="Customize example" %}

On the homepage, there's a new customization section with a live example:

{% include docs/elements/anchor.html name="Breadcrumb" %}

A breadcrumb is now visible at the top of each page, to easily navigate up and down the hierarchy.

This has led to the creation of new intermediate pages:

• documentation
• documentation/modifiers
• documentation/columns
• documentation/layout
• documentation/form
• documentation/elements
• documentation/components
• more

{% include docs/elements/anchor.html name="Links" %}

These intermediate pages have new link boxes that help dive into each sub-category:

{% include docs/elements/anchor.html name="Previous/Next" %}

Next to the breadcrumb, you can easily navigate to the sibling pages with the previous and next links:

These links are also available at the bottom:

{% include docs/elements/anchor.html name="Categories" %}

There's a new sidebar including a navigation menu with all the categories and sub-categories:

{% include docs/elements/anchor.html name="Scroll spy" %}

On some pages below the categories, you'll find a new menu called "On this page" which is actually a scroll spy:

{% include docs/elements/anchor.html name="Footer" %}

The footer has been redesigned as well. Among other things, there's a sitemap available:

{% include docs/elements/anchor.html name="Code" %}

The Bulma website is built with Jekyll. In the process of this redesign, the underlying code that helps maintain this website has been optimized and cleaned up as well.

This will help further updates to be easier.

Posts 2018 04 14 Migration To V070 (`docs/_posts/2018-04-14-migration-to-v070.md`) Copy Section

title: "Migrating to v0.7.0" layout: post introduction: "What has changed" color: "success" name: "Migrating to v0.7.0" icon: "angle-double-up" Copy Chapter

A new major Bulma update is out: v0.7.0!

While this update is mainly focused on a massive website redesign, it also includes a few bug fixes, some new features, and some variable changes.

These variable changes are documented here, so you can edit or revert them if needed.

{% include docs/elements/anchor.html name="Updated default values" %}

{% for item in site.data.blog.migratingv070.updated %}

| File
{{ item.file }} | | |

| --- | --- | --- |
| Variable | From | To |
| {{ change.variable }} | {{ change.from }} | {{ change.to }} |

{% endfor %}

{% include docs/elements/anchor.html name="New variables" %}

{% for item in site.data.blog.migratingv070.new %}

| File
{{ item.file }} | |

| --- | --- |
| Name | Value |
| {{ newcomer.name }} | {{ newcomer.value }} |

{% endfor %}

{% include docs/elements/anchor.html name="Removed variables" %}

`{{ newcomer }}`
      {% endfor %} |

Posts 2018 06 20 Automatic Variables Documentation (`docs/_posts/2018-06-20-automatic-variables-documentation.md`) Copy Section

title: "Automatic variables documentation" layout: post introduction: "Keeping the docs in sync" color: "link" name: "Automatic variables docs" icon: "sync-alt" Copy Chapter

Bulma is highly customizable because there are 415 Sass variables across 28 files.

More and more CSS values are transformed into Sass variables for easy customization. And each new Bulma feature is required to come with its own set of variables.

While providing these variables is necessary, it's only useful if developers are aware they exist! Keeping in sync the documentation and the source files used to be a manual process. It is now automatic, thanks to a script that parses the source files and outputs the numerous Sass variables as JSON data.

As an added bonus, each variable row in the docs comes with its type and its computed value (if applicable).

Posts 2019 10 15 Light Dark Colors (`docs/_posts/2019-10-15-light-dark-colors.md`) Copy Section

title: "Light and Dark colors, better look, larger form controls, panel colors, and more" layout: post introduction: "A big update for more colors and flexibility" color: "expo" name: "Light/Dark colors, better look, larger controls" icon: "sun" featured: true image: hgGplX3PFBg alt: "Light and dark clouds" Copy Chapter

The new version Bulma 0.8.0 is out! 😃 It comes with several bug fixes and a lot of nice new features:

• Light/Dark colors
• Better visual look
• Panel colors
• Larger form controls
• 4-value color map
• Scheme variables for "Dark mode"

More in the Changelog.

{% include docs/elements/anchor.html name="Light/Dark colors" %}

Each main color ("primary", "info", "success", "warning", "danger") now comes with a *-light and a *-dark version. They are calculated using 2 new color functions:

• findLightColor() which finds the light version of a color
• findDarkColor() which finds the dark version of a color

The light colors are used by the button element:

The light and dark colors are used by the message component, which generates much prettier colored versions. See the difference between before (left) and after (right):

{% include docs/elements/anchor.html name="Better visual look" %}

Some of the Bulma colors have been updated:

The shadows of the box and card have been improved:

{% include docs/elements/anchor.html name="Panel colors" %}

The [panel component]({{ site.data.links.by_id.components-panel.path }}) is now available in all colors:

{% include docs/elements/anchor.html name="Larger form controls" %}

Form controls and buttons are now 2.5em high. You can revert this resizing by setting these previous values:

$control-height: 2.25em
$control-padding-vertical: calc(0.375em - #{$control-border-width})
$control-padding-horizontal: calc(0.625em - #{$control-border-width})

$button-padding-vertical: calc(0.375em - #{$button-border-width})
$button-padding-horizontal: 0.75em

{% include docs/elements/anchor.html name="4-value color map" %}

The $colors Sass map now accepts, for each of its values, a map of up to 4 values. For example: the key "info" now has the ($info, $info-invert, $info-light, $info-dark) map.

If you provide a $custom-colors map, you can decide to provide a map of 1, 2, 3 or 4 values for each value. If fewer than 4 are provided, Bulma will calculate the remaining ones:

$custom-colors: (
  "lime": (
    lime,
  ),
  "tomato": (
    tomato,
    white,
  ),
  "orange": (
    $orange,
    $orange-invert,
    $orange-light,
  ),
  "lavender": (
    $lavender,
    $lavender-invert,
    $lavender-light,
    $lavender-dark,
  ),
);

This is processed by the updated mergeColorMaps() Sass function.

{% include docs/elements/anchor.html name='Scheme variables for "Dark mode"' %}

There are 6 new $scheme derived variables: $scheme-main $scheme-main-bis $scheme-main-ter $scheme-invert $scheme-invert-bis $scheme-invert-ter
They replace the $white and $black occurrences in the codebase.

This makes it easy to create a "Dark mode" simply by swapping the values:

$scheme-main: $black
$scheme-invert: $white
// etc.

That is also why most of the codebase now references derived variables ($text, $background, $border etc.) instead of initial ones ($grey, $grey-lighter, $grey-darker etc.): updating the derived variables will affect all elements and components directly.

The new 0.8.0 version should be fully compatible with any Bulma setup. Feel free to post an issue if you encounter any problem upgrading.

Posts 2021 01 12 New Feature Icon Text (`docs/_posts/2021-01-12-new-feature-icon-text.md`) Copy Section

title: "New feature: `.icon-text`" layout: post introduction: "An easy way to combine an `.icon` with text" color: "primary" name: "New feature: Icon Text" icon: "star-of-life" Copy Chapter

Bulma's .icon element has been around since its inception. It acts as a simple container for any icon font. And thanks to its fixed square dimensions, it provides the icon font time to load while preserving the space fo it.

From version 0.9.2, a new .icon-text element will be available. It allows you to easily combine an .icon element with text. The purpose of this new feature is to preserve the correct alignment of both parts.

Home

You can combine several icons in sequence:

Paris

  

Budapest

  

Bucharest

  

Istanbul

See the full .icon-text documentation.

Posts 2021 01 23 The Block Probably Bulmas Most Important Feature (`docs/_posts/2021-01-23-the-block-probably-bulmas-most-important-feature.md`) Copy Section

title: 'The `.block`, probably Bulma’s most important feature' layout: post introduction: 'Automatic spacing for everything in Bulma' color: 'danger' name: 'The Bulma block' icon: 'cube' Copy Chapter

The Bulma block is a simple element but with a very powerful feature: it provides 1.5rem margin at the bottom, if it's not the last child.

It exists as its own .block CSS class, but its properties are also used on many other Bulma components.

For example, if you were to combine a notification, and a pagination, they would be automatically spaced evenly:

Newsletter

451 new subscribers this month.

For comparison, if there was no spacing, here's what they would look like:

Newsletter

451 new subscribers this month.

This block element has always existed; only recently has there been a dedicated documentation page.

Documentation Features Color Palettes (`docs/documentation/features/color-palettes.md`) Copy Section

title: Color Palettes in Bulma
layout: docs
markdown: true
theme: features
doc-tab: features
doc-subtab: color-palettes
breadcrumb:

• home
• documentation
• features
• features-color-palettes

Bulma comes with 7 primary colors:

Bulma will automatically generate a collection of CSS variables for each of those colors. These sets of variables act as a color palette you can use to play with different shades of a same color.

For example, by setting the primary color with $primary: hsl(171, 100%, 41%), Bulma will generate the following CSS variables:

• --bulma-primary
• --bulma-primary-rgb if you want to create your own RGBA shade: rgba(var(--bulma-primary-rgb), 0.5)
• --bulma-primary-h equal to the primary hue
• --bulma-primary-s equal to the primary saturation
• --bulma-primary-l equal to the primary lightness
• --bulma-primary-base (equal to --bulma-primary)
• --bulma-primary-invert which is a color that will look decent on the primary color (in a foreground/background combination)
• --bulma-primary-light which is the primary color at 90% lightness
• --bulma-primary-light-invert which is a color that looks good on the -light version
• --bulma-primary-dark which is the primary color at 20% lightness
• --bulma-primary-dark-invert which is a color that looks good on the -dark version
• --bulma-primary-soft which is a light color in light mode, and a dark color in dark mode
• --bulma-primary-bold which is a dark color in light mode, and a light color in dark mode
• --bulma-primary-soft-invert which is the same as the bold version
• --bulma-primary-bold-invert which is the same as the soft version
• --bulma-primary-on-scheme which is a color that looks good on the scheme-main color (which by default is white, and is used as the page's background color)

Here is what they look like:

Soft and Bold colors Copy Chapter

Because Bulma now has a Dark Mode, it comes with a new color concept: soft and bold colors.

A soft color is a shade of a color that has little contrast with the background. It's a muted, faint shade of that color.

In light mode, this means that a soft color will be light as well. It's ideal of backgrounds:

On the other hand, the bold color has a stark contrast with the background. It's a strong, distinct shade of that color.

In light mode, this means that a bold color will be dark. It's ideal of text colors:

{% include docs/components/single-color-row.html color="primary-bold" label="text color" classname="has-text-primary-bold" %}

The best use of these colors is to combine them: the soft color as background, the bold color as foreground:

| --bulma-primary-soft as background
--bulma-primary-bold as foreground | The quick brown fox jumps over the lazy dog |

| --- | --- |

Automatic switching when going into Dark Mode Copy Section

If you use switch to between light mode and dark mode, you will notice that the soft and bold colors will swap. That way, you don't need to update your CSS classes to keep a decent design.

Invert colors Copy Chapter

The purpose of -invert colors is to combine them with their base counterparts. For example, if you use primary-light as the background color, you can use primary-light-invert as the foreground color:

21 shades for each color Copy Chapter

Bulma will automatically generate 21 shades of each color, one for each amount of lightness, starting from around 0% and going up in 5% increments, until 100% is reached.

I am saying around 0% because the last digit is determined by the base color. If the base color's lightness is 42%, then --bulma-primary-00 will be 2%, not 0%.

Each of these shades has an -invert counterpart that can be used as a foreground color:

Lightness CSS variables Copy Section

If you write your own CSS and want to use one these shades yourself, you can access the lightness value via its dedicated CSS variable that has a -l suffix.

For example, the bulma-primary-75 color is defined like this:

:root {
  --bulma-primary-75: hsla(
    var(--bulma-primary-h),
    var(--bulma-primary-s),
    var(--bulma-primary-75-l),
    1
  );
}

In this case, --bulma-primary-75-l is equal to 76%, and you can access its value with the var(--bulma-primary-75-l) CSS variable.

CSS helper classes Copy Chapter

While you can access all a color's CSS variables directly by writing color: var(--bulma-primary) for example, Bulma also provides CSS helper classes for each color.

Those helper classes exist for to set either the color or the background.

Documentation Features Css Variables (`docs/documentation/features/css-variables.md`) Copy Section

title: CSS Variables in Bulma
layout: docs
markdown: true
theme: features
doc-tab: features
doc-subtab: css-variables
breadcrumb:

• home
• documentation
• features
• features-css-variables

All Bulma components are styled using CSS Variables (which are also called CSS custom properties). Read more about them on the MDN Reference.

For example, here is how the .title element is styled:

.title {
  color: var(--bulma-title-color);
  font-size: var(--bulma-title-size);
  font-weight: var(--bulma-title-weight);
  line-height: var(--bulma-title-line-height);
}

Scope Copy Chapter

Bulma CSS variables are either defined:

• at the global scope :root
• at the component scope, like .button

CSS Variables defined at a more specific scope (like .button) will override the ones defined at a more global scope.

:root {
  /* Default global value */
  --bulma-size-medium: 1.25rem;
}

.button {
  /* Overrides the global value */
  --bulma-size-medium: 1.5rem;
}

Prefix Copy Chapter

All Bulma CSS variables are prefixed with bulma- (including the dash). You will notice theme when inspecting a webpage:

This prefix can be changed by setting the $cssvars-prefix Sass variable:

@use "bulma/sass" with (
  $cssvars-prefix: "my-prefix-"
);

Themes Copy Chapter

The global CSS variables defined at the :root level are what defines a Bulma theme. Think of a theme as simply a collection of CSS variables.

Documentation Features Dark Mode (`docs/documentation/features/dark-mode.md`) Copy Section

title: Dark Mode in Bulma
layout: docs
markdown: true
theme: features
doc-tab: features
doc-subtab: dark-mode
breadcrumb:

• home
• documentation
• features
• features-dark-mode

Modern browsers come with a way to detect if a user has set their theme preference to light or dark by using the prefers-color-scheme keyword.

This value can be used in a media query to change a website's styles accordingly:

@media (prefers-color-scheme: dark) {
  :root {
    /* Update CSS variables */
  }
}

However, it's not possible for a website to alter this preference. That's why it's preferable to also add a data-theme HTML attribute or a theme-dark CSS class.

This is how Bulma defines its dark theme:

@media (prefers-color-scheme: dark) {
  :root {
    /* Update CSS variables */
  }
}

[data-theme=dark],
.theme-dark {
  /* Update CSS variables */
}

With these rules:

• the website will be light by default, if no user preference is set
• it will also be light if the user has set their preference to light
• the website will be dark if the user has set their preference to dark

{% include docs/elements/anchor.html name="Force Dark Mode within a page" %}

You can enable Dark Mode in part of your HTML by simply using the HTML attribute or the CSS class:

<div>
  This is in Light Mode if the user hasn't set a preference, or if their preference is set to <code>light</code>.
</div>

<div data-theme="dark">
  This is in Dark Mode
</div>

<div class="theme-dark">
  This is also in Dark Mode
</div>

{% include docs/elements/anchor.html name="Force Dark Mode for a whole webpage" %}

If you want to enable Dark Mode for a whole webpage, simply set the attribute or the class on the <html> element:

<html data-theme="dark">

<html class="theme-dark">

{% include docs/elements/anchor.html name="How the Dark theme is created" %}

This is the content of the sass/themes/dark.scss file:

/* Detailed source-code truncated for AI context efficiency. */

This mixin outputs a list of CSS variables and their new value.

To use this theme with the prefer-color-scheme media query, write the following:

@use "sass/utilities/css-variables" as cv;
@use "sass/themes/dark";

@include cv.system-theme($name: "dark") {
  @include dark.dark-theme;
}

To use this theme with the [data-theme=dark] and .theme-dark selectors, write the following:

@use "sass/utilities/css-variables" as cv;
@use "sass/themes/dark";
@use "sass/themes/setup";

@include cv.bulma-theme($name: "dark") {
  @include dark.dark-theme;
  @include setup.setup-theme;
}

The `bulma-theme()` mixin Copy Section

This mixin will allow you to generate a CSS rule-set with both an appropriate HTML attribute selector and a CSS class selector, which names are defined by the $name parameter.

@use "sass/utilities/css-variables" as cv;

@include cv.bulma-theme($name: "my-theme") {
  // Your code
}

This will output the following:

[data-theme=my-theme],
.theme-my-theme {
  /* Your code */
}

The `system-theme()` mixin Copy Section

This mixin will generate a @media (prefers-color-scheme: $name) media query.

@use "sass/utilities/css-variables" as cv;

@include cv.system-theme($name: "dark") {
  // Your code
}

This will output the following:

@media (prefers-color-scheme: dark) {
  :root {
    /* Your code */
  }
}

The `register-vars()` function Copy Section

All Bulma CSS variables are prefixed with bulma-. This prefix is defined with the $cssvars-prefix: "bulma-"; Sass variable.

Because writing all CSS variables with this prefix can be cumbersome, Bulma provides a Sass function to register new variables: register-vars().

This function accepts a Sass map of name: value pairs.

@use "sass/utilities/css-variables" as cv;

$scheme-main-l: 11%;
$background-l: 14%;
$text-l: 71%;

@include cv.bulma-theme($name: "my-theme") {
  @include cv.register-vars(
    (
      "scheme-brightness": "dark",
      "scheme-main-l": $scheme-main-l,
      "scheme-main-bis-l": $scheme-main-l + 2%,
      "scheme-main-ter-l": $scheme-main-l + 4%,
      "background-l": $background-l,
      "border-weak-l": 21%,
      "border-l": 24%,
      "text-weak-l": 53%,
      "text-l": $text-l,
      "text-strong-l": 93%,
      "text-title-l": 100%,
      "hover-background-l-delta": 5%,
      "active-background-l-delta": 10%,
      "hover-border-l-delta": 10%,
      "active-border-l-delta": 20%,
      "hover-color-l-delta": 5%,
      "active-color-l-delta": 10%,
    )
  );
}

Updating the lightness Copy Section

For Dark Mode, Bulma will keep the same hue and saturation of the main scheme color. It will however invert the lightness of background, borders, text colors, and hover/active states.

The `generate-on-scheme-colors()` function Copy Section

The scheme color is the one used for:

• {% include docs/elements/color-swatch.html background="var(--bulma-background)" %} backgrounds
• {% include docs/elements/color-swatch.html background="var(--bulma-border)" %} borders
• text shades
  • {% include docs/elements/color-swatch.html background="var(--bulma-text-strong)" %} strong text
  • {% include docs/elements/color-swatch.html background="var(--bulma-text-weak)" %} weak text
  • {% include docs/elements/color-swatch.html background="var(--bulma-title-color)" %} title text
  • {% include docs/elements/color-swatch.html background="var(--bulma-text)" %} and normal text

For each of the 7 primary colors {% include docs/elements/primary-colors.html %}, the default Bulma theme generates on scheme shades, meaning shades of each color that will look decent on the main scheme color.

In Light Mode, they look like this:

Because in Dark Mode we are inverting the lightness of these colors, the page background will go from white {% include docs/elements/color-swatch.html background="#fff" %} to black {% include docs/elements/color-swatch.html background="#141414" %}. We thus need to update the -on-scheme colors of all 7 primary colors.

In Dark Mode, they look like this:

If you are creating your own theme, you can automatically generate new -on-scheme colors by using the generate-on-scheme-colors() for each color. It takes 3 parameters:

• $name which is a string. E.g. "primary"
• $color which is the color value. E.g.
• $scheme-main which is the theme's main scheme color (the one used as the page background). E.g. #fff

The full code looks like this:

@use "sass/utilities/css-variables" as cv;
@use "sass/utilities/derived-variables" as dv;

$scheme-main-l: 11%;
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);

@include cv.bulma-theme($name: "my-theme") {
  @each $name, $color in dv.$colors {
    @include cv.generate-on-scheme-colors($name, $color, $scheme-main);
  }
}

The `setup-theme()` function Copy Section

In Bulma, some CSS variables reference other CSS variables. For example, --bulma-scheme-main is defined like this:

:root {
  --bulma-scheme-main: hsl(
    var(--bulma-scheme-h)
    var(--bulma-scheme-s)
    var(--bulma-scheme-main-l)
  );
}

Because of how CSS variables work, if you update the value of --bulma-scheme-main-l, you need to define --bulma-scheme-main again. That is what setup-theme() does.

[data-theme=my-theme],
.theme-my-theme {
  --bulma-scheme-main-l: 7%;
  --bulma-scheme-main: hsl(
    var(--bulma-scheme-h)
    var(--bulma-scheme-s)
    var(--bulma-scheme-main-l)
  );
}

If you create your own theme, simply call this function after having set your own CSS variables:

@use "sass/themes/setup";

@include cv.bulma-theme($name: "my-theme") {
  // Set your own CSS variables,
  // either manually:
  --bulma-scheme-main-l: 7%;
  // or using Bulma's register-vars() function:
  @include register-vars((
    "bulma-scheme-main-l": 7%,
  ));

  // Then, setup the new theme.
  @include setup.setup-theme();
}

Documentation Features Themes (`docs/documentation/features/themes.md`) Copy Section

title: Themes in Bulma
layout: docs
markdown: true
theme: features
doc-tab: features
doc-subtab: themes
breadcrumb:

• home
• documentation
• features
• features-themes

In Bulma, a theme is a collection of CSS variables.

Bulma comes with 2 themes:

• light.scss (required)
• dark.scss (optional)

The default themes Copy Chapter

Because Bulma requires a default value for all CSS variables, it comes with a default light theme located at /sass/themes/light.scss.

It also comes with a dark theme located at /sass/themes/dark.scss.

The file /sass/themes/_index.scss takes care of including both themes, each in two ways:

• with the @media (prefers-color-scheme: $name) media query
• with an HTML attribute [data-theme=$name] and CSS class .theme-$name selector

The only difference is that the light theme is also defined at the top-level: :root (equivalent to the html element, the ancestor of all HTML elements on a webpage). This ensures that a default value is set for all CSS variables.

The CSS output of that theme resembles the following:

:root {
    /* CSS Variables */
}

@media (prefers-color-scheme: light) {
  :root {
    /* CSS Variables */
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    /* CSS Variables */
  }
}

[data-theme=light],
.theme-light {
  /* CSS Variables */
}

[data-theme=dark],
.theme-dark {
  /* CSS Variables */
}

Creating a custom theme Copy Chapter

Creating a theme is essentially setting your own CSS variables. A custom theme requires:

• a name like sunrise
• a scope like :root, [data-theme=sunrise], .theme-sunrise or all three
• a set of CSS variables and their new value

Customizing in the browser Copy Section

If you set your CSS variables under the :root scope, you are overwriting Bulma's default theme. This can be done by with Sass or CSS.

To test out the CSS method, simply follow these steps:

{% include docs/elements/step.html image="images/themes/step-1-inspect.png" content="Open your browser inspector" width=496 height=748 %}
{% include docs/elements/step.html image="images/themes/step-2-html.png" content="Select the html element" width=528 height=232 %}
{% include docs/elements/step.html image="images/themes/step-3-var.png" content="Insert a new value for the --bulma-link-h variable (the hue of the link color)" width=376 height=120 %}
{% include docs/elements/step.html image="images/themes/step-4-menu.png" content="Notice how the CSS Helpers section in the side menu changes color" width=480 height=256 %}

--- METRICS ---

• Files Extracted: 24
• Estimated Token Budget: ~21927 tokens
• Canonical Reference: https://codewiki.google/github.com/jgthms/bulma