Bulma

https://github.com/jgthms/bulma
Admin
Bulma is a modern CSS framework based on Flexbox, offering a responsive and modular design for web...
Tokens:78,234
Snippets:876
Trust Score:9.7
License:MIT
Update:4 days ago
Show doc for...
Tokens:
Raw
### Install and start bulma-start

Source: https://github.com/jgthms/bulma/blob/main/docs/bulma-start.html

After downloading and renaming the bulma-start package, run this command to install dependencies and start the development server.

```bash
cd my-new-bulma-site && npm install && npm start
```

--------------------------------

### Navbar Start and End Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

Shows the navbar-start and navbar-end containers for left and right alignment.

```html
<div class="navbar-start">
  <a class="navbar-item">Home</a>
</div>
<div class="navbar-end">
  <a class="navbar-item">Log in</a>
</div>
```

--------------------------------

### Navbar Dropup Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

A full dropup example with a link to documentation.

```html
<div class="navbar-item has-dropdown is-hoverable is-dropup">
  <a class="navbar-link">Dropup</a>
  <div class="navbar-dropdown">
    <a class="navbar-item">Overview</a>
    <a class="navbar-item">Elements</a>
    <a class="navbar-item">Components</a>
    <hr class="navbar-divider">
    <a class="navbar-item">Version 0.9.4</a>
  </div>
</div>
```

--------------------------------

### Navbar start and navbar end example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

Shows the `navbar-start` and `navbar-end` as the two direct and only children of the `navbar-menu`. On desktop, `navbar-start` appears on the left and `navbar-end` on the right.

```html
{{navbar_start_end_example}}
```

--------------------------------

### Install Bulma with Bower

Source: https://github.com/jgthms/bulma/blob/main/README.md

Install Bulma as a dependency using the Bower package manager.

```sh
bower install bulma
```

--------------------------------

### Navbar Dropdown Default Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

A default dropdown example with a logo and documentation link.

```html
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" alt="Bulma">
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-start">
      <div class="navbar-item has-dropdown">
        <a class="navbar-link">Docs</a>
        <div class="navbar-dropdown">
          <a class="navbar-item">Overview</a>
          <a class="navbar-item">Elements</a>
          <a class="navbar-item">Components</a>
          <hr class="navbar-divider">
          <a class="navbar-item">Version 0.9.4</a>
        </div>
      </div>
    </div>
    <div class="navbar-end">
      <a class="navbar-item">Documentation</a>
    </div>
  </div>
</nav>
```

--------------------------------

### Navbar Example (Default)

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

A navbar example with default styling, likely including brand, menu, and dropdown.

```html
{% include docs/examples/navbar.html id="Default" %}
```

--------------------------------

### Install Bulma with npm

Source: https://github.com/jgthms/bulma/blob/main/README.md

Install Bulma as a dependency using the npm package manager.

```sh
npm install bulma
```

--------------------------------

### Install Bulma with Yarn

Source: https://github.com/jgthms/bulma/blob/main/README.md

Install Bulma as a dependency using the Yarn package manager.

```sh
yarn add bulma
```

--------------------------------

### Dropdown menu example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

Example of creating a dropdown menu with `navbar-item` having `has-dropdown`, `navbar-link`, and `navbar-dropdown` containing `navbar-item` and `navbar-divider`.

```html
{{ navbar_dropdown_example }}
```

--------------------------------

### Navbar Menu Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

The navbar-menu container, typically containing start and end sections.

```html
<div id="navbarBasicExample" class="navbar-menu">
  <div class="navbar-start">
    <a class="navbar-item">Home</a>
  </div>
  <div class="navbar-end">
    <a class="navbar-item">Log in</a>
  </div>
</div>
```

--------------------------------

### Import Bulma CSS

Source: https://github.com/jgthms/bulma/blob/main/README.md

Import the Bulma CSS file into your project after installation.

```sh
@import 'bulma/css/bulma.css'
```

--------------------------------

### Basic HTML page example

Source: https://github.com/jgthms/bulma/blob/main/docs/cyp/elements/content.html

A minimal HTML document with a title and a paragraph, used as a content example in the Bulma documentation.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
  </body>
</html>
```

--------------------------------

### Navbar Transparent Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

A transparent navbar example, likely with boxed dropdown.

```html
{% include docs/examples/navbar.html transparent=true boxed=true id="TransparentExample" %}
```

--------------------------------

### Navbar Item Dropdown Bis Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

Another dropdown example with a different structure.

```html
<div class="navbar-item has-dropdown">
  <a class="navbar-link">Overview</a>
  <div class="navbar-dropdown">
    <a class="navbar-item">Elements</a>
  </div>
</div>
```

--------------------------------

### Deprecated Tiles HTML example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/start/migrating-to-v1.html

Shows the deprecated Tiles markup that should be replaced with the new Smart Grid.

```html
<div class="tile is-ancestor">
  <div class="tile is-vertical is-8">
    <div class="tile">
      <div class="tile is-parent">
        <article class="tile is-child box">
          <p class="title">Hello World</p>
          <p>What is up?</p>
        </article>
      </div>
    </div>
  </div>
</div>
```

--------------------------------

### Install Bulma and Sass via npm

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/customize/with-sass.html

Install the Bulma and Sass packages using npm. This is the first step in setting up a custom Bulma project.

```bash
npm install sass
npm install bulma
```

--------------------------------

### Navbar Dropdown Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

A dropdown with links and a divider.

```html
<div class="navbar-dropdown">
  <a class="navbar-item">Docs</a>
  <a class="navbar-item">Overview</a>
  <a class="navbar-item">Elements</a>
  <a class="navbar-item">Components</a>
  <hr class="navbar-divider">
  <a class="navbar-item">Version 0.9.4</a>
</div>
```

--------------------------------

### Navbar Dropdown Boxed Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

A dropdown with boxed styling.

```html
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" alt="Bulma">
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-start">
      <div class="navbar-item has-dropdown is-boxed">
        <a class="navbar-link">Docs</a>
        <div class="navbar-dropdown">
          <a class="navbar-item">Overview</a>
          <a class="navbar-item">Elements</a>
          <a class="navbar-item">Components</a>
          <hr class="navbar-divider">
          <a class="navbar-item">Version 0.9.4</a>
        </div>
      </div>
    </div>
    <div class="navbar-end">
      <a class="navbar-item">Documentation</a>
    </div>
  </div>
</nav>
```

--------------------------------

### Bulma columns HTML example

Source: https://github.com/jgthms/bulma/blob/main/docs/_includes/home/columns.html

Displays a simple Bulma columns layout with five equal-width columns. The example is generated by the interactive tool and shown in the highlighted code block.

```html
1

2

3

4

5
```

--------------------------------

### Run Jekyll serve with local config

Source: https://github.com/jgthms/bulma/blob/main/docs/README.md

Starts a local HTTP server at http://localhost:4000/ serving the docs built in the _site directory. Use --open-url (or --o) to auto-open the URL in the default browser. Requires copying _config.yml to _config.local.yml and setting url: to http://localhost:4000 first.

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

--------------------------------

### Navbar Item Link Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

A simple navbar-item as a link.

```html
<a class="navbar-item">Home</a>
```

--------------------------------

### Basic Navbar Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

A basic navbar with brand, menu, and buttons. Includes a dropdown for 'More' and a divider.

```html
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" alt="Bulma">
    </a>

    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">
        Home
      </a>

      <a class="navbar-item">
        Documentation
      </a>

      <div class="navbar-item has-dropdown">
        <a class="navbar-link">
          More
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            About
          </a>
          <a class="navbar-item">
            Jobs
          </a>
          <a class="navbar-item">
            Contact
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item">
            Report an issue
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>
```

--------------------------------

### CSS: Custom theme setup with setup-theme()

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/features/dark-mode.md

Shows the CSS output that setup-theme() generates for a custom theme, redefining --bulma-scheme-main after setting --bulma-scheme-main-l. This is needed because CSS variables require redefinition when a referenced variable changes.

```css
[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)
  );
}
```

--------------------------------

### Clone Bulma GitHub repository with GitHub CLI

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/start/installation.html

Clone the Bulma GitHub repository using the GitHub CLI. Note that the repository also includes this documentation, so it's significantly bigger than the NPM package.

```bash
{{ site.data.meta.git_cli }}
```

--------------------------------

### Navbar Item Other Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

Shows navbar items with buttons for Tweet and Download.

```html
<div class="navbar-item">
  <div class="buttons">
    <a class="button is-primary">Tweet</a>
    <a class="button is-light">Download</a>
  </div>
</div>
```

--------------------------------

### Transparent navbar example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

Example of adding the `is-transparent` modifier on the `navbar` component to remove any hover or active background from the navbar items.

```html
{{ navbar_transparent_example }}
```

--------------------------------

### Clone Bulma GitHub repository with HTTPS

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/start/installation.html

Clone the Bulma GitHub repository using HTTPS. Note that the repository also includes this documentation, so it's significantly bigger than the NPM package.

```bash
{{ site.data.meta.git_https }}
```

--------------------------------

### Navbar Item Dropdown Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

A navbar-item with a dropdown, showing a link and a dropdown menu.

```html
<div class="navbar-item has-dropdown">
  <a class="navbar-link">Docs</a>
  <div class="navbar-dropdown">
    <a class="navbar-item">Overview</a>
  </div>
</div>
```

--------------------------------

### Navbar item as navigation link

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

Example of a `navbar-item` used as a navigation link.

```html
{{ navbar_item_link_example }}
```

--------------------------------

### JavaScript file upload example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/form/file.html

Updates the file name placeholder when a file is selected using JavaScript.

```html
<label class="file has-name" id="file-js-example">
  <input class="file-input" type="file" name="resume">
  <span class="file-cta">
    <span class="file-icon">
      <i class="fas fa-upload"></i>
    </span>
    <span class="file-label">
      Choose a file…
    </span>
  </span>
  <span class="file-name">
    No file uploaded
  </span>
</label>
```

```javascript
const fileInput = document.querySelector("#file-js-example input[type=file]");
fileInput.onchange = () => {
  if (fileInput.files.length > 0) {
    const fileName = document.querySelector("#file-js-example .file-name");
    fileName.textContent = fileInput.files[0].name;
  }
};
```

--------------------------------

### HTML usage of spacing helpers

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/helpers/spacing-helpers.html

Shows how to apply spacing helper classes to HTML elements. The example includes a margin-bottom class, horizontal padding, and both margin and padding on a single element.

```html
<div class="mb-4">Margin bottom</div>
<div class="px-2">Horizontal padding</div>
<div class="mt-3 pb-5">Both</div>
```

--------------------------------

### Clone Bulma GitHub repository with SSH

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/start/installation.html

Clone the Bulma GitHub repository using SSH. Note that the repository also includes this documentation, so it's significantly bigger than the NPM package.

```bash
{{ site.data.meta.git_ssh }}
```

--------------------------------

### Navbar item as container for anything

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

Example of a `navbar-item` used as a container for almost anything, like a `field`.

```html
{{ navbar_item_other_example }}
```

--------------------------------

### Media Object with skeleton (bis)

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/features/skeletons.html

Alternative media object skeleton example with a placeholder image and a submit button.

```html
<article class="media is-skeleton">
  <figure class="media-left">
    <p class="image is-128x128">
      <img src="https://placehold.co/128x128" alt="Placeholder image">
    </p>
  </figure>
  <div class="media-content">
    <div class="field">
      <p class="control">
        <button class="button">Submit</button>
      </p>
    </div>
    <small>Press enter to submit</small>
  </div>
</article>
```

--------------------------------

### Navbar Dropdown Item Active Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

A dropdown with an active item.

```html
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" alt="Bulma">
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-start">
      <div class="navbar-item has-dropdown">
        <a class="navbar-link">Docs</a>
        <div class="navbar-dropdown">
          <a class="navbar-item is-active">Overview</a>
          <a class="navbar-item">Elements</a>
          <a class="navbar-item">Components</a>
          <hr class="navbar-divider">
          <a class="navbar-item">Version 0.9.4</a>
        </div>
      </div>
    </div>
    <div class="navbar-end">
      <a class="navbar-item">Documentation</a>
    </div>
  </div>
</nav>
```

--------------------------------

### Navbar Brand Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

Shows the navbar-brand container with a logo and burger icon.

```html
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" alt="Bulma">
    </a>

    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
</nav>
```

--------------------------------

### Navbar Brand Items Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

A navbar-brand with a logo item.

```html
<div class="navbar-brand">
  <a class="navbar-item" href="https://bulma.io">
    <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" alt="Bulma">
  </a>
</div>
```

--------------------------------

### Basic columns layout with equal-width columns

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/columns/basics.html

Create a columns layout by adding a `columns` container and as many `column` elements as needed. Each column gets an equal width regardless of the number of columns.

```html
<div class="columns">
  <div class="column">First column</div>
  <div class="column">Second column</div>
  <div class="column">Third column</div>
  <div class="column">Fourth column</div>
</div>
```

--------------------------------

### Navbar Divider Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

A horizontal divider used inside dropdowns.

```html
<hr class="navbar-divider">
```

--------------------------------

### Overwriting Global CSS Variables

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/customize/concepts.html

Shows how to overwrite global CSS variables by setting new values at the same scope. This example changes the scheme hue and saturation.

```css
:root {
  /* Set new values */
  --bulma-scheme-h: 35;
  --bulma-scheme-s: 20%;
}
```

--------------------------------

### Navbar Burger Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

The navbar-burger element, typically used for mobile navigation toggle.

```html
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>
```

--------------------------------

### Navbar Menu Active Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

The navbar-menu with the 'is-active' class, shown when the burger is toggled.

```html
<div id="navbarBasicExample" class="navbar-menu is-active">
  <div class="navbar-start">
    <a class="navbar-item">Home</a>
  </div>
  <div class="navbar-end">
    <a class="navbar-item">Log in</a>
  </div>
</div>
```

--------------------------------

### Navbar Burger Active Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

The navbar-burger with the 'is-active' class, indicating an open state.

```html
<a role="button" class="navbar-burger is-active" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>
```

--------------------------------

### Navbar item as dropdown parent

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

Example of a `navbar-item` used as the parent of a dropdown menu.

```html
{{ navbar_item_dropdown_example }}
```

--------------------------------

### Example without block elements

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/elements/block.html

Shows three sibling elements without the block class, resulting in no space between them.

```html
<div>
  This text is <em>not</em> within a <strong>block</strong>.
</div>

<div>
  This text <em>isn't</em> within a <strong>block</strong> either. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
</div>

<div>
  This text is also <em>not</em> within a <strong>block</strong>.
</div>
```

--------------------------------

### Link Bulma CSS via CDN with HTML link tag

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/start/installation.html

Use this HTML link tag to load the minified Bulma CSS from jsDelivr in your page. This is the HTML alternative to the CSS @import method.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma.min.css">
```

--------------------------------

### Navbar Item Brand Example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

A navbar-item used for branding, containing a logo.

```html
<a class="navbar-item">
  <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" alt="Bulma">
</a>
```

--------------------------------

### Navbar item as brand logo container

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

Example of a `navbar-item` used as a container for the brand logo.

```html
{{ navbar_item_brand_example }}
```

--------------------------------

### Modal card example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/modal.html

A classic modal with a head, body, and foot using the `modal-card` structure. Includes a title, body content, and footer buttons for saving or canceling.

```html
<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <!-- Content ... -->
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>
```

--------------------------------

### Block element example with three blocks

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/elements/block.html

Shows three sibling blocks where the first two have a margin-bottom and the third does not, because Bulma applies spacing to all blocks except the last one.

```html
<div class="block">
  This text is within a <strong>block</strong>.
</div>

<div class="block">
  This text is within a <strong>second block</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
</div>

<div class="block">
  This text is within a <strong>third block</strong>. This block has no margin at the bottom.
</div>
```

--------------------------------

### Navbar item as child of navbar dropdown

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

Example of a `navbar-item` used as a child of a navbar dropdown.

```html
{{ navbar_item_dropdown_bis_example }}
```

--------------------------------

### Basic radio button example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/form/radio.html

The `radio` class wraps `<input type="radio">` elements. It is intentionally not styled to preserve cross-browser compatibility and user experience. Ensure linked radio buttons share the same `name` attribute value.

```html
<label class="radio">
  <input type="radio" name="answer">
  Yes
</label>
<label class="radio">
  <input type="radio" name="answer">
  No
</label>
```

--------------------------------

### Using Bulma extends with @use and @extend

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/sass/extends.html

Import the extend rules with @use and use them with @extend. This example extends the %control placeholder and adds custom styles.

```sass
@use "bulma/sass/utilities/extends";
.my-control {
  @extend %control;
  background-color: purple;
  color: white;
}
```

--------------------------------

### Import Bulma CSS via CDN with CSS @import

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/start/installation.html

Use this CSS @import statement to load the minified Bulma CSS from jsDelivr. Since v1, the main version works in RTL contexts via logical properties, so no separate RTL version is needed.

```css
@import "https://cdn.jsdelivr.net/npm/bulma@{{site.data.meta.version }}/css/bulma.min.css";
```

--------------------------------

### Try it out! Show bottom navbar JavaScript

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

Interactive example to show or hide the bottom navbar by toggling the `has-navbar-fixed-bottom` class on the root element and the `is-hidden` class on the navbar element.

```javascript
document.addEventListener('DOMContentLoaded', () => { const rootEl = document.documentElement; const navbarBottomEl = document.getElementById('navbarBottom'); const fixBottomEl = document.getElementById('navbarFixBottom'); const fixBottomElText = document.getElementById('navbarFixBottomText'); let fixedBottom = false; fixBottomEl.addEventListener('click', event => { fixedBottom = !fixedBottom; if (fixedBottom) { fixBottomEl.className = 'button is-success'; fixBottomElText.innerHTML = 'Hide'; rootEl.classList.add('has-navbar-fixed-bottom'); navbarBottomEl.classList.remove('is-hidden'); } else { fixBottomEl.className = 'button is-link'; fixBottomElText.innerHTML = 'Show'; rootEl.classList.remove('has-navbar-fixed-bottom'); navbarBottomEl.classList.add('is-hidden'); } }); });
```

--------------------------------

### Link Bulma RTL CSS via CDN with HTML link tag

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/start/installation.html

Use this HTML link tag to load the minified Bulma RTL CSS from jsDelivr. This is the HTML alternative to the CSS @import method for the RTL version.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma-rtl.min.css">
```

--------------------------------

### Vanilla JavaScript toggle for navbar-burger and navbar-menu

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

Implementation example to toggle the `is-active` class on both the `navbar-burger` and the targeted `navbar-menu`. The Bulma package does not come with any JavaScript, so this is provided as a reference.

```html
{{ navbar_js_html }}
```

```javascript
{{ navbar_js_code }}
```

--------------------------------

### Import Bulma RTL CSS via CDN with CSS @import

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/start/installation.html

Use this CSS @import statement to load the minified Bulma RTL CSS from jsDelivr. Note that since v1, the main version already works in RTL contexts, so this separate RTL version is no longer developed.

```css
@import "https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma-rtl.min.css";
```

--------------------------------

### Image modal example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/modal.html

A modal variant that contains an image, useful for building an image gallery. The modal can contain any content, so this shows how to embed an image inside the `modal-content` container.

```html
<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <p class="image is-4by3">
      <img src="{{site.url}}/assets/images/placeholders/1280x960.png" alt="">
    </p>
  </div>
  <button class="modal-close" aria-label="close"></button>
</div>
```

--------------------------------

### Customize a component when importing it with @use

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/customize/with-modular-sass.html

When importing a component and customizing it, use the `with` keyword to override its Sass variables. This example overrides the `$dimensions` variable of the `bulma/sass/elements/image` component.

```sass
@use "bulma/sass/elements/image" with (
  $dimensions: 20 40 80 160,
);
```

--------------------------------

### setup-theme()

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/features/dark-mode.md

Sets up a custom theme by redefining CSS variables that reference other CSS variables. This function should be called after setting your own CSS variables to ensure the theme works correctly.

```APIDOC
## setup-theme()

### Description
Sets up a custom theme by redefining CSS variables that reference other CSS variables. This function should be called after setting your own CSS variables to ensure the theme works correctly.

### Usage Example
```scss
@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();
}
```
```

--------------------------------

### Addons with multiple icons or states using field is-grouped

Source: https://github.com/jgthms/bulma/blob/main/docs/_posts/2017-03-10-new-field-element.md

Example of a grouped field with three controls: two with icons (success and warning) and one with a loading spinner. Demonstrates the new ability to have multiple icons or loaders in a group of controls.

```html
<div class="field is-grouped">
  <p class="control is-expanded has-icon">
    <input class="input is-success" type="text" placeholder="Username" value="alexsmith">
    <span class="icon is-small">
      <i class="fas fa-check"></i>
    </span>
  </p>
  <p class="control is-expanded has-icon">
    <input class="input is-warning" type="email" placeholder="Email" value="alex@smith.com">
    <span class="icon is-small">
      <i class="fas fa-exclamation-triangle"></i>
    </span>
  </p>
  <p class="control is-expanded is-loading">
    <input class="input" type="email" placeholder="Name">
  </p>
</div>
```

--------------------------------

### Add build scripts to package.json

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/customize/with-sass.html

Add scripts to your package.json to build Bulma with Sass and watch for changes. The 'build-bulma' script compiles your custom Sass file, and 'start' runs it in watch mode.

```json
"build-bulma": "sass --load-path=node_modules my-bulma-project.scss my-bulma-project.css",
"start": "npm run build-bulma -- --watch"
```

--------------------------------

### Use system-theme() mixin to generate prefers-color-scheme media query

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/features/dark-mode.md

Generates a @media (prefers-color-scheme: $name) media query. The mixin is imported from sass/utilities/css-variables. The example uses $name: "dark" and outputs a :root block inside the media query.

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

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

--------------------------------

### SCSS customization of spacing variables

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/helpers/spacing-helpers.html

Customizes the spacing helper class name shortcuts and values. This example renames margin to 'mg', excludes padding and vertical, abbreviates horizontal to 'h', and defines three custom values: small (10px), medium (30px), and large (60px).

```scss
$spacing-shortcuts: ("margin": "mg");
$spacing-horizontal: "h";
$spacing-vertical: null;
$spacing-values: ("small": 10px, "medium": 30px, "large": 60px);
```

--------------------------------

### SCSS: Custom theme with setup-theme() call

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/features/dark-mode.md

Use this SCSS snippet to create a custom theme and call setup-theme() after setting your own CSS variables. It shows both manual variable setting and using register-vars(). Requires importing sass/themes/setup.

```scss
@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();
}
```

--------------------------------

### Smart Grid replacement for Tiles

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/start/migrating-to-v1.html

Shows the new Smart Grid markup that replaces the deprecated Tiles component.

```html
<div class="grid">
  <div class="cell">
    <div class="box">
      <p class="title">Hello World</p>
      <p>What is up?</p>
    </div>
  </div>
  <div class="cell">
    <div class="box">
      <p class="title">Foo Bar</p>
      <p>What is up?</p>
    </div>
  </div>
</div>
```

--------------------------------

### Complete version usage (Library + Helpers)

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/start/alternative-versions.html

Use the complete Bulma version with no CSS prefix. Includes helper classes. Download bulma.css or bulma.min.css.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
  </head>
  <body>
    <section class="section">
      <div class="container">
        <h1 class="title">
          Hello World
        </h1>
        <p class="subtitle">
          My first website with <strong>Bulma</strong>!
        </p>
      </div>
    </section>
  </body>
</html>
```

--------------------------------

### No Helpers, Prefixed version usage

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/start/alternative-versions.html

Use the Bulma library without helpers and with 'bulma-' prefix. Download bulma-no-helpers-prefixed.css or bulma-no-helpers-prefixed.min.css.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/versions/bulma-no-helpers-prefixed.min.css">
  </head>
  <body>
    <section class="bulma-section">
      <div class="bulma-container">
        <h1 class="bulma-title">
          Hello World
        </h1>
        <p class="bulma-subtitle">
          My first website with <strong>Bulma</strong>!
        </p>
      </div>
    </section>
  </body>
</html>
```

--------------------------------

### Library Only version usage (No Helpers)

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/start/alternative-versions.html

Use the Bulma library without helper classes. No CSS prefix. Download bulma-no-helpers.css or bulma-no-helpers.min.css.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/versions/bulma-no-helpers.min.css">
  </head>
  <body>
    <section class="section">
      <div class="container">
        <h1 class="title">
          Hello World
        </h1>
        <p class="subtitle">
          My first website with <strong>Bulma</strong>!
        </p>
      </div>
    </section>
  </body>
</html>
```

--------------------------------

### Create an HTML page to view your Bulma project

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/customize/with-sass.html

Create an index.html page with the content from the included snippet to display your Bulma project. The snippet is referenced from the docs/snippets/custom-page.html file.

```html
{%- include docs/snippets/custom-page.html -%}
```

--------------------------------

### Build Bulma with npm run build-bulma

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/customize/with-sass.html

Run the build command to compile your custom Sass file. This produces two files: my-bulma-project.css (the CSS output) and my-bulma-project.css.map (an optional source map).

```bash
npm run build-bulma
```

--------------------------------

### Responsive column sizes with breakpoint modifiers

Source: https://github.com/jgthms/bulma/blob/main/docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md

Apply different column sizes for each breakpoint using modifiers like `is-half-mobile`, `is-one-third-tablet`, and `is-one-quarter-desktop`. When using mobile modifiers on single column elements, ensure the `columns` container also has the `is-mobile` modifier.

```html
<div class="columns is-mobile">
  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop"></div>
  <!-- Other columns -->
</div>
```

--------------------------------

### Multiline columns with is-multiline and column size modifiers

Source: https://github.com/jgthms/bulma/blob/main/docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md

Use the `is-multiline` modifier on the `columns` container along with column size modifiers like `is-one-quarter` or `is-half` to define multiple rows within the same container. This avoids closing and reopening a new `columns` container for each row.

```html
<div class="columns is-multiline is-mobile">
  <div class="column is-one-quarter"></div>
  <div class="column is-one-quarter"></div>
  <div class="column is-one-quarter"></div>
  <div class="column is-one-quarter"></div>
  <div class="column is-half"></div>
  <div class="column is-one-quarter"></div>
  <div class="column is-one-quarter"></div>
  <div class="column is-one-quarter"></div>
  <div class="column"></div>
</div>
```

--------------------------------

### Disabled radio button example

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/form/radio.html

To disable a radio button, add the `disabled` HTML attribute to both the `<label>` and the `<input>` elements.

```html
<label class="radio" disabled>
  <input type="radio" name="answer" disabled>
  Going
</label>
<label class="radio">
  <input type="radio" name="answer">
  Not going
</label>
<label class="radio">
  <input type="radio" name="answer">
  Maybe
</label>
```

--------------------------------

### Customizing link color to primary in Sass

Source: https://github.com/jgthms/bulma/blob/main/docs/_posts/2017-10-09-roses-are-red-links-are-blue.md

Shows how to override the `$link` color to use `$primary` and its associated variables for a custom Bulma setup.

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

--------------------------------

### Load a Sass file with @use

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/start/modular.html

Use the Sass @use rule to load a Bulma .scss file. This is the basic syntax for importing any Sass module.

```sass
@use "path/to/file.scss";
```

--------------------------------

### loader()

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/sass/mixins.html

Creates a 1em spinning circle.

```APIDOC
## loader()

### Description
Creates a 1em spinning circle.

### Example
```sass
.bulma-loader-mixin {
  @include mixins.loader;
}
```
```

--------------------------------

### jQuery toggle for navbar-burger and navbar-menu

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/components/navbar.html

Alternative implementation example using jQuery to toggle the `is-active` class on both the `navbar-burger` and the targeted `navbar-menu`. The Bulma package does not come with any JavaScript.

```javascript
{{ navbar_jquery_code }}
```

--------------------------------

### Sass @use and @forward after migration

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/start/migrating-to-v1.html

Shows the recommended Dart Sass @use approach for customizing Bulma variables.

```sass
// After
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;

// Path to Bulma's sass folder
@use "path/to/bulma/sass" with (
  $family-primary: '"Nunito", sans-serif',
  $grey-dark: $brown,
  $grey-light: $beige-light,
  $primary: $purple,
  $link: $pink,
  $control-border-width: 2px,
  $input-h: color.hue($beige-lighter),
  $input-s: color.saturation($beige-lighter),
  $input-background-l: color.lightness($beige-lighter),
  $input-border-l: color.lightness($beige-lighter),
  $input-shadow: none
);
```

--------------------------------

### Swap scheme variables for dark mode

Source: https://github.com/jgthms/bulma/blob/main/docs/_posts/2019-10-15-light-dark-colors.md

Sets $scheme-main and $scheme-invert to create a dark mode. The comment indicates additional variables can be set similarly.

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

--------------------------------

### Import Bulma elements and components

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/start/modular.html

Load Bulma's base styles and themes along with specific elements and components like button, title, and message. This is preferable for components that rely on base styles and CSS variables.

```sass
// Load Bulma's base styles and themes (including the minireset)
@use "bulma/sass/base";
@use "bulma/sass/themes";
// Load the button and title elements and components
@use "bulma/sass/elements/button";
@use "bulma/sass/elements/title";
@use "bulma/sass/components/message";
```

--------------------------------

### Use dark theme with data-theme and theme-dark selectors

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/features/dark-mode.md

To use the dark theme with the [data-theme=dark] and .theme-dark selectors, include the dark theme mixin and the setup mixin inside the cv.bulma-theme mixin.

```scss
@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;
}
```

--------------------------------

### system-theme() mixin

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/features/dark-mode.md

Generates a `@media (prefers-color-scheme: $name)` media query. Use it to define styles that apply when the user's system theme matches the specified name.

```APIDOC
## system-theme() mixin

### Description
Generates a `@media (prefers-color-scheme: $name)` media query. Use it to define styles that apply when the user's system theme matches the specified name.

### Parameters
- **$name** (string) - Required - The name of the color scheme (e.g., "dark").

### Usage Example
```scss
@use "sass/utilities/css-variables" as cv;

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

### Output Example
```css
@media (prefers-color-scheme: dark) {
  :root {
    /* Your code */
  }
}
```
```

--------------------------------

### Info color file upload with name

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/form/file.html

Applies the `is-info` color modifier and includes a file name placeholder.

```html
<label class="file is-info has-name">
  <input class="file-input" type="file" name="resume">
  <span class="file-cta">
    <span class="file-icon">
      <i class="fas fa-upload"></i>
    </span>
    <span class="file-label">
      Info file…
    </span>
  </span>
  <span class="file-name">
    Screen Shot 2017-07-29 at 15.54.25.png
  </span>
</label>
```

--------------------------------

### CSS media query for prefers-color-scheme

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/features/dark-mode.md

Use this media query to detect the user's color scheme preference and update CSS variables accordingly. The example shows the basic structure for a dark theme.

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

--------------------------------

### Changing the CSS variable prefix with $cssvars-prefix

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/features/css-variables.md

Shows how to change the default 'bulma-' prefix for all CSS variables by setting the $cssvars-prefix Sass variable when importing Bulma. The example uses 'my-prefix-' as the new prefix.

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

--------------------------------

### Example of .title element styling with CSS variables

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/features/css-variables.md

Shows how Bulma's .title component uses CSS variables for its properties. The variables are defined at component scope and reference global or component-level custom properties.

```css
.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);
}
```

--------------------------------

### File upload with name placeholder

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/form/file.html

Adds a placeholder for the selected file name using the `has-name` modifier and `file-name` element.

```html
<label class="file has-name">
  <input class="file-input" type="file" name="resume">
  <span class="file-cta">
    <span class="file-icon">
      <i class="fas fa-upload"></i>
    </span>
    <span class="file-label">
      Choose a file…
    </span>
  </span>
  <span class="file-name">
    Screen Shot 2017-07-29 at 15.54.25.png
  </span>
</label>
```

--------------------------------

### Notification with JavaScript Delete Handler

Source: https://github.com/jgthms/bulma/blob/main/docs/documentation/elements/notification.html

HTML structure for a notification with a delete button, paired with vanilla JavaScript that removes the notification when the delete button is clicked. The Bulma package does not include JavaScript, so this implementation is provided as an example.

```html
<div class="notification">
  <button class="delete"></button>
  Lorem ipsum
</div>
```

```javascript
document.addEventListener('DOMContentLoaded', () => {
  (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
    const $notification = $delete.parentNode;
    $delete.addEventListener('click', () => {
      $notification.parentNode.removeChild($notification);
    });
  });
});
```
Tokens:
Raw