Overriding Bulma Variables

Bulma ships sensible defaults. Learn to layer custom CSS variables on top without forking the framework or adding a Sass build step.

Edit the panels below and press Run to preview. Nothing you type here is saved — refreshing the page restores the original starter code.

<div class="demo">Override target</div>

.demo {
  padding: 1rem;
  background: var(--bulma-primary, teal);
  color: white;
}

console.log("Bulma variables lesson loaded");