Try Live
Add Docs
Rankings
Pricing
Docs
Install
Install
Docs
Pricing
More...
More...
Try Live
Rankings
Enterprise
Create API Key
Add Docs
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:
128,181
Snippets:
1,043
Trust Score:
9.7
Update:
3 months ago
Context
Skills
Chat
Benchmark
83.4
Suggestions
Latest
Show doc for...
Code
Info
Show Results
Context Summary (auto-generated)
Raw
Copy
Link
# Bulma CSS Framework Bulma is a modern, open-source CSS framework based on Flexbox that provides a comprehensive collection of responsive components and utilities for building web interfaces. It is a pure CSS framework with no JavaScript dependencies, allowing developers to use it with any JavaScript framework or vanilla JavaScript. The framework follows a mobile-first approach and uses semantic HTML classes to create flexible, customizable layouts. The framework is built with Sass and provides extensive customization through CSS variables and Sass variables. Bulma includes a complete set of UI components (buttons, cards, modals, navbars), form elements, grid systems (both columns and CSS Grid), layout helpers, and utility classes. Version 1.0.0 introduced a major rewrite using Dart Sass with CSS Variables, enabling CSS-only customization without Sass. It supports modern browsers through autoprefixer and offers multiple installation methods including npm, Yarn, CDN, and direct CSS imports. The framework also includes built-in dark mode support, color palettes for all primary colors, skeleton loaders, and optional class prefixing. ## Installation and Setup ### NPM Installation ```bash npm install bulma ``` ### Yarn Installation ```bash yarn add bulma ``` ### CDN Usage ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bulma Example</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css"> </head> <body> <section class="section"> <div class="container"> <h1 class="title">Hello Bulma</h1> </div> </section> </body> </html> ``` ### Import in CSS/Sass ```css @import 'bulma/css/bulma.css'; ``` ### Custom Sass Import ```scss @charset "utf-8"; // Import specific components @use "bulma/sass/utilities"; @use "bulma/sass/base"; @use "bulma/sass/elements/button"; @use "bulma/sass/components/card"; ``` ### Alternative Versions Bulma provides pre-built alternative versions for specific use cases: ```scss // Version without dark mode support @import 'bulma/css/versions/bulma-no-dark-mode.css'; // Version without helper classes (smaller file size) @import 'bulma/css/versions/bulma-no-helpers.css'; // Version with prefixed classes (e.g., .bd-button instead of .button) @import 'bulma/css/versions/bulma-prefixed.css'; // Prefixed version without helpers @import 'bulma/css/versions/bulma-no-helpers-prefixed.css'; ``` ## CSS Variables and Theming Since version 1.0.0, Bulma uses CSS Variables for easy customization without Sass: ```css /* Override Bulma variables with CSS */ :root { --bulma-primary-h: 171deg; --bulma-primary-s: 100%; --bulma-primary-l: 41%; --bulma-family-sans-serif: "Nunito", sans-serif; --bulma-radius: 0.5rem; --bulma-size-1: 3.5rem; } /* Custom button styling */ .my-custom-button { background-color: var(--bulma-primary); color: var(--bulma-primary-invert); border-radius: var(--bulma-radius); } ``` ## Dark Mode Support Bulma includes built-in dark mode support that responds to system preferences: ```html <!-- Dark mode is automatically applied based on prefers-color-scheme --> <body> <section class="section"> <div class="container"> <h1 class="title">This adapts to dark mode automatically</h1> <button class="button is-primary">Primary Button</button> </div> </section> </body> ``` To force a specific theme: ```css /* Force light theme */ html { color-scheme: light; } /* Force dark theme */ html { color-scheme: dark; } ``` ## Button Component ```html <!-- Basic button --> <button class="button">Button</button> <!-- Colored buttons --> <button class="button is-primary">Primary</button> <button class="button is-link">Link</button> <button class="button is-info">Info</button> <button class="button is-success">Success</button> <button class="button is-warning">Warning</button> <button class="button is-danger">Danger</button> <!-- Button sizes --> <button class="button is-small">Small</button> <button class="button is-normal">Normal</button> <button class="button is-medium">Medium</button> <button class="button is-large">Large</button> <!-- Responsive buttons (size changes per breakpoint) --> <button class="button is-small-mobile is-normal-tablet is-medium-desktop">Responsive</button> <!-- Button styles --> <button class="button is-outlined">Outlined</button> <button class="button is-inverted">Inverted</button> <button class="button is-rounded">Rounded</button> <button class="button is-loading">Loading</button> <button class="button is-ghost">Ghost (link-like)</button> <!-- Button states --> <button class="button is-hovered">Hovered</button> <button class="button is-focused">Focused</button> <button class="button is-active">Active</button> <button class="button" disabled>Disabled</button> <!-- Buttons with icons --> <button class="button"> <span class="icon"> <i class="fas fa-download"></i> </span> <span>Download</span> </button> <!-- Button group --> <div class="buttons"> <button class="button is-success">Save</button> <button class="button is-danger">Delete</button> <button class="button">Cancel</button> </div> <!-- Addons (attached buttons) --> <div class="buttons has-addons"> <button class="button">Yes</button> <button class="button">Maybe</button> <button class="button">No</button> </div> <!-- Fullwidth button --> <button class="button is-primary is-fullwidth">Full Width Button</button> ``` ## Card Component ```html <!-- Basic card --> <div class="card"> <div class="card-content"> <p class="title">Card Title</p> <p class="subtitle">Card Subtitle</p> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. </div> </div> </div> <!-- Card with header --> <div class="card"> <header class="card-header"> <p class="card-header-title">Component</p> <button class="card-header-icon" aria-label="more options"> <span class="icon"> <i class="fas fa-angle-down"></i> </span> </button> </header> <div class="card-content"> <div class="content"> Card content goes here. </div> </div> </div> <!-- Card with image --> <div class="card"> <div class="card-image"> <figure class="image is-4by3"> <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder"> </figure> </div> <div class="card-content"> <div class="media"> <div class="media-left"> <figure class="image is-48x48"> <img src="https://bulma.io/images/placeholders/96x96.png" alt="Avatar"> </figure> </div> <div class="media-content"> <p class="title is-4">John Smith</p> <p class="subtitle is-6">@johnsmith</p> </div> </div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time> </div> </div> </div> <!-- Card with footer --> <div class="card"> <div class="card-content"> <p>Card content</p> </div> <footer class="card-footer"> <a href="#" class="card-footer-item">Save</a> <a href="#" class="card-footer-item">Edit</a> <a href="#" class="card-footer-item">Delete</a> </footer> </div> ``` ## Skeleton Loaders Bulma includes skeleton loaders for content loading states: ```html <!-- Skeleton text lines --> <div class="skeleton-lines"> <div></div> <div></div> <div></div> </div> <!-- Skeleton block --> <div class="skeleton-block"></div> <!-- Card with skeleton content --> <div class="card"> <div class="card-content"> <div class="media"> <div class="media-left"> <figure class="image is-48x48"> <div class="skeleton-block"></div> </figure> </div> <div class="media-content"> <div class="skeleton-lines"> <div></div> <div></div> </div> </div> </div> </div> </div> <!-- Button with skeleton state --> <button class="button is-skeleton">Loading...</button> ``` ## Form Elements - Input and Textarea ```html <!-- Basic input --> <div class="field"> <label class="label">Name</label> <div class="control"> <input class="input" type="text" placeholder="Text input"> </div> </div> <!-- Input with validation states --> <div class="field"> <label class="label">Email</label> <div class="control"> <input class="input is-success" type="email" placeholder="Email" value="alex@example.com"> </div> <p class="help is-success">This email is valid</p> </div> <div class="field"> <label class="label">Subject</label> <div class="control"> <input class="input is-danger" type="text" placeholder="Subject"> </div> <p class="help is-danger">This field is required</p> </div> <!-- Input sizes --> <div class="field"> <div class="control"> <input class="input is-small" type="text" placeholder="Small input"> </div> </div> <div class="field"> <div class="control"> <input class="input is-medium" type="text" placeholder="Medium input"> </div> </div> <div class="field"> <div class="control"> <input class="input is-large" type="text" placeholder="Large input"> </div> </div> <!-- Input with icon --> <div class="field"> <p class="control has-icons-left has-icons-right"> <input class="input" type="email" placeholder="Email"> <span class="icon is-small is-left"> <i class="fas fa-envelope"></i> </span> <span class="icon is-small is-right"> <i class="fas fa-check"></i> </span> </p> </div> <!-- Rounded input --> <div class="field"> <div class="control"> <input class="input is-rounded" type="text" placeholder="Rounded input"> </div> </div> <!-- Textarea --> <div class="field"> <label class="label">Message</label> <div class="control"> <textarea class="textarea" placeholder="Your message here..."></textarea> </div> </div> <!-- Fixed size textarea --> <div class="field"> <div class="control"> <textarea class="textarea has-fixed-size" placeholder="Fixed size textarea"></textarea> </div> </div> <!-- Radio buttons list (v1.0.2+) --> <div class="field"> <label class="label">Choose an option</label> <div class="control radios"> <label class="radio"> <input type="radio" name="option"> Option 1 </label> <label class="radio"> <input type="radio" name="option"> Option 2 </label> <label class="radio"> <input type="radio" name="option"> Option 3 </label> </div> </div> <!-- Checkboxes list (v1.0.2+) --> <div class="field"> <label class="label">Select features</label> <div class="control checkboxes"> <label class="checkbox"> <input type="checkbox"> Feature A </label> <label class="checkbox"> <input type="checkbox"> Feature B </label> <label class="checkbox"> <input type="checkbox"> Feature C </label> </div> </div> <!-- Form with multiple fields --> <form> <div class="field"> <label class="label">Username</label> <div class="control has-icons-left"> <input class="input" type="text" placeholder="Username" required> <span class="icon is-small is-left"> <i class="fas fa-user"></i> </span> </div> </div> <div class="field"> <label class="label">Password</label> <div class="control has-icons-left"> <input class="input" type="password" placeholder="Password" required> <span class="icon is-small is-left"> <i class="fas fa-lock"></i> </span> </div> </div> <div class="field"> <div class="control"> <label class="checkbox"> <input type="checkbox"> Remember me </label> </div> </div> <div class="field is-grouped"> <div class="control"> <button class="button is-link">Submit</button> </div> <div class="control"> <button class="button is-link is-light">Cancel</button> </div> </div> </form> ``` ## Grid System - Columns ```html <!-- Basic columns --> <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> <!-- Column sizes (12-column grid) --> <div class="columns"> <div class="column is-half">is-half (50%)</div> <div class="column">Auto</div> </div> <div class="columns"> <div class="column is-one-third">is-one-third (33.33%)</div> <div class="column">Auto</div> </div> <div class="columns"> <div class="column is-one-quarter">is-one-quarter (25%)</div> <div class="column">Auto</div> </div> <!-- Numeric column sizes --> <div class="columns"> <div class="column is-4">is-4 (33.33%)</div> <div class="column is-8">is-8 (66.66%)</div> </div> <div class="columns"> <div class="column is-3">is-3 (25%)</div> <div class="column is-6">is-6 (50%)</div> <div class="column is-3">is-3 (25%)</div> </div> <!-- Responsive columns --> <div class="columns"> <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop"> Responsive column </div> <div class="column">Auto</div> </div> <!-- Centered columns --> <div class="columns is-centered"> <div class="column is-half">Centered column</div> </div> <!-- Multiline columns --> <div class="columns is-multiline"> <div class="column is-one-quarter">25%</div> <div class="column is-one-quarter">25%</div> <div class="column is-one-quarter">25%</div> <div class="column is-one-quarter">25%</div> <div class="column is-half">50%</div> <div class="column is-one-quarter">25%</div> <div class="column is-one-quarter">25%</div> </div> <!-- Gapless columns --> <div class="columns is-gapless"> <div class="column">No gap</div> <div class="column">No gap</div> <div class="column">No gap</div> </div> <!-- Variable column gaps (v1.0.2+) --> <div class="columns is-0"> <div class="column">No gap</div> <div class="column">No gap</div> </div> <div class="columns is-1"> <div class="column">Gap 0.25rem</div> <div class="column">Gap 0.25rem</div> </div> <div class="columns is-8"> <div class="column">Gap 2rem</div> <div class="column">Gap 2rem</div> </div> <!-- Mobile columns --> <div class="columns is-mobile"> <div class="column">Mobile column</div> <div class="column">Mobile column</div> <div class="column">Mobile column</div> </div> ``` ## CSS Grid System Bulma also includes a modern CSS Grid system: ```html <!-- Fixed grid with auto-fill --> <div class="fixed-grid has-4-cols"> <div class="grid"> <div class="cell">Cell 1</div> <div class="cell">Cell 2</div> <div class="cell">Cell 3</div> <div class="cell">Cell 4</div> <div class="cell">Cell 5</div> <div class="cell">Cell 6</div> </div> </div> <!-- Responsive grid columns --> <div class="fixed-grid has-2-cols-mobile has-3-cols-tablet has-4-cols-desktop"> <div class="grid"> <div class="cell">Responsive cell</div> <div class="cell">Responsive cell</div> <div class="cell">Responsive cell</div> <div class="cell">Responsive cell</div> </div> </div> <!-- Smart grid with min-width columns --> <div class="grid is-col-min-12"> <div class="cell">Min 12rem wide</div> <div class="cell">Min 12rem wide</div> <div class="cell">Min 12rem wide</div> </div> <!-- Grid with gaps --> <div class="fixed-grid has-3-cols"> <div class="grid is-gap-4"> <div class="cell">Cell with gap</div> <div class="cell">Cell with gap</div> <div class="cell">Cell with gap</div> </div> </div> <!-- Cell spanning multiple columns/rows --> <div class="fixed-grid has-4-cols"> <div class="grid"> <div class="cell is-col-span-2">Spans 2 columns</div> <div class="cell">Cell</div> <div class="cell">Cell</div> <div class="cell is-row-span-2">Spans 2 rows</div> <div class="cell">Cell</div> <div class="cell">Cell</div> <div class="cell">Cell</div> </div> </div> ``` ## Navbar Component ```html <!-- Basic navbar --> <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"> </a> <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasic"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasic" 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 is-hoverable"> <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> <!-- Colored navbar --> <nav class="navbar is-primary"> <div class="navbar-brand"> <a class="navbar-item">Brand</a> </div> <div class="navbar-menu"> <div class="navbar-start"> <a class="navbar-item">Item 1</a> <a class="navbar-item">Item 2</a> </div> </div> </nav> <!-- Fixed navbar --> <nav class="navbar is-fixed-top"> <div class="navbar-brand"> <a class="navbar-item">Fixed Top</a> </div> </nav> <!-- Transparent navbar --> <nav class="navbar is-transparent"> <div class="navbar-brand"> <a class="navbar-item">Transparent</a> </div> </nav> <!-- Navbar with JavaScript toggle --> <script> document.addEventListener('DOMContentLoaded', () => { const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); $navbarBurgers.forEach(el => { el.addEventListener('click', () => { const target = el.dataset.target; const $target = document.getElementById(target); el.classList.toggle('is-active'); $target.classList.toggle('is-active'); }); }); }); </script> ``` ## Hero Component ```html <!-- Basic hero --> <section class="hero"> <div class="hero-body"> <p class="title">Hero title</p> <p class="subtitle">Hero subtitle</p> </div> </section> <!-- Colored hero --> <section class="hero is-primary"> <div class="hero-body"> <p class="title">Primary Hero</p> <p class="subtitle">Primary subtitle</p> </div> </section> <!-- Hero sizes --> <section class="hero is-small is-info"> <div class="hero-body"> <p class="title">Small Hero</p> </div> </section> <section class="hero is-medium is-success"> <div class="hero-body"> <p class="title">Medium Hero</p> </div> </section> <section class="hero is-large is-warning"> <div class="hero-body"> <p class="title">Large Hero</p> </div> </section> <!-- Fullheight hero --> <section class="hero is-fullheight is-primary"> <div class="hero-body"> <div class="container has-text-centered"> <p class="title">Fullheight Hero</p> <p class="subtitle">Takes up entire viewport</p> </div> </div> </section> <!-- Hero with navbar --> <section class="hero is-success is-fullheight"> <div class="hero-head"> <nav class="navbar"> <div class="container"> <div class="navbar-brand"> <a class="navbar-item">Logo</a> </div> <div class="navbar-menu"> <div class="navbar-end"> <span class="navbar-item"> <a class="button is-success is-inverted"> <span>Download</span> </a> </span> </div> </div> </div> </nav> </div> <div class="hero-body"> <div class="container has-text-centered"> <p class="title">Title</p> <p class="subtitle">Subtitle</p> </div> </div> <div class="hero-foot"> <nav class="tabs is-boxed is-fullwidth"> <div class="container"> <ul> <li class="is-active"><a>Overview</a></li> <li><a>Modifiers</a></li> <li><a>Grid</a></li> <li><a>Elements</a></li> </ul> </div> </nav> </div> </section> <!-- Bold gradient hero --> <section class="hero is-bold is-primary is-medium"> <div class="hero-body"> <p class="title">Bold gradient</p> <p class="subtitle">With is-bold modifier</p> </div> </section> ``` ## Modal Component ```html <!-- Basic modal --> <div class="modal"> <div class="modal-background"></div> <div class="modal-content"> <div class="box"> <p>Modal content goes here</p> </div> </div> <button class="modal-close is-large" aria-label="close"></button> </div> <!-- Modal with card --> <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"> <p>Modal content</p> <div class="field"> <label class="label">Email</label> <div class="control"> <input class="input" type="email" placeholder="e.g. alex@example.com"> </div> </div> </section> <footer class="modal-card-foot"> <button class="button is-success">Save changes</button> <button class="button">Cancel</button> </footer> </div> </div> <!-- Image modal --> <div class="modal"> <div class="modal-background"></div> <div class="modal-content"> <p class="image is-4by3"> <img src="https://bulma.io/images/placeholders/1280x960.png" alt=""> </p> </div> <button class="modal-close is-large" aria-label="close"></button> </div> <!-- Modal JavaScript --> <button class="button is-primary" id="modal-trigger">Open Modal</button> <div class="modal" id="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"> <p>Modal content</p> </section> <footer class="modal-card-foot"> <button class="button is-success">OK</button> <button class="button">Cancel</button> </footer> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const modal = document.getElementById('modal'); const trigger = document.getElementById('modal-trigger'); const closeButtons = modal.querySelectorAll('.modal-background, .modal-close, .delete, .button'); trigger.addEventListener('click', () => { modal.classList.add('is-active'); }); closeButtons.forEach(button => { button.addEventListener('click', () => { modal.classList.remove('is-active'); }); }); }); </script> ``` ## Notification Component ```html <!-- Basic notification --> <div class="notification"> This is a notification message. </div> <!-- Colored notifications --> <div class="notification is-primary"> <button class="delete"></button> Primary notification </div> <div class="notification is-link"> <button class="delete"></button> Link notification </div> <div class="notification is-info"> <button class="delete"></button> Info notification </div> <div class="notification is-success"> <button class="delete"></button> Success notification </div> <div class="notification is-warning"> <button class="delete"></button> Warning notification </div> <div class="notification is-danger"> <button class="delete"></button> Danger notification </div> <!-- Light colored notifications --> <div class="notification is-primary is-light"> <button class="delete"></button> Light primary notification </div> <div class="notification is-success is-light"> <button class="delete"></button> Light success notification </div> <!-- Notification with JavaScript delete --> <div class="notification is-info" id="notification"> <button class="delete"></button> Click the delete button to dismiss </div> <script> document.addEventListener('DOMContentLoaded', () => { const notification = document.getElementById('notification'); const deleteButton = notification.querySelector('.delete'); deleteButton.addEventListener('click', () => { notification.remove(); }); }); </script> ``` ## Message Component ```html <!-- Basic message --> <article class="message"> <div class="message-header"> <p>Message Title</p> <button class="delete" aria-label="delete"></button> </div> <div class="message-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </article> <!-- Colored messages --> <article class="message is-primary"> <div class="message-header"> <p>Primary</p> <button class="delete"></button> </div> <div class="message-body"> Primary message body. </div> </article> <article class="message is-info"> <div class="message-header"> <p>Info</p> </div> <div class="message-body"> Info message body. </div> </article> <article class="message is-success"> <div class="message-body"> Success message without header. </div> </article> <article class="message is-warning"> <div class="message-body"> <strong>Warning:</strong> This is a warning message. </div> </article> <article class="message is-danger"> <div class="message-body"> <strong>Error:</strong> Something went wrong. </div> </article> <!-- Message sizes --> <article class="message is-small"> <div class="message-body">Small message</div> </article> <article class="message is-medium"> <div class="message-body">Medium message</div> </article> <article class="message is-large"> <div class="message-body">Large message</div> </article> ``` ## Box Component ```html <!-- Basic box --> <div class="box"> A simple box container with padding and shadow. </div> <!-- Box with content --> <div class="box"> <article class="media"> <div class="media-left"> <figure class="image is-64x64"> <img src="https://bulma.io/images/placeholders/128x128.png" alt="Image"> </figure> </div> <div class="media-content"> <div class="content"> <p> <strong>John Smith</strong> <small>@johnsmith</small> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </div> </article> </div> <!-- Multiple boxes --> <div class="box"> <p class="title is-5">First Box</p> <p>Content of the first box</p> </div> <div class="box"> <p class="title is-5">Second Box</p> <p>Content of the second box</p> </div> ``` ## Breadcrumb Component ```html <!-- Basic breadcrumb --> <nav class="breadcrumb" aria-label="breadcrumbs"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Documentation</a></li> <li><a href="#">Components</a></li> <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li> </ul> </nav> <!-- Breadcrumb alignment --> <nav class="breadcrumb is-centered"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Documentation</a></li> <li class="is-active"><a href="#">Centered</a></li> </ul> </nav> <nav class="breadcrumb is-right"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Documentation</a></li> <li class="is-active"><a href="#">Right</a></li> </ul> </nav> <!-- Breadcrumb separators --> <nav class="breadcrumb has-arrow-separator"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Arrow</a></li> <li class="is-active"><a href="#">Separator</a></li> </ul> </nav> <nav class="breadcrumb has-bullet-separator"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Bullet</a></li> <li class="is-active"><a href="#">Separator</a></li> </ul> </nav> <nav class="breadcrumb has-dot-separator"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Dot</a></li> <li class="is-active"><a href="#">Separator</a></li> </ul> </nav> <nav class="breadcrumb has-succeeds-separator"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Succeeds</a></li> <li class="is-active"><a href="#">Separator</a></li> </ul> </nav> <!-- Breadcrumb sizes --> <nav class="breadcrumb is-small"> <ul> <li><a href="#">Home</a></li> <li class="is-active"><a href="#">Small</a></li> </ul> </nav> <nav class="breadcrumb is-medium"> <ul> <li><a href="#">Home</a></li> <li class="is-active"><a href="#">Medium</a></li> </ul> </nav> <nav class="breadcrumb is-large"> <ul> <li><a href="#">Home</a></li> <li class="is-active"><a href="#">Large</a></li> </ul> </nav> ``` ## Menu Component ```html <!-- Basic menu --> <aside class="menu"> <p class="menu-label">General</p> <ul class="menu-list"> <li><a>Dashboard</a></li> <li><a>Customers</a></li> </ul> <p class="menu-label">Administration</p> <ul class="menu-list"> <li><a>Team Settings</a></li> <li> <a class="is-active">Manage Your Team</a> <ul> <li><a>Members</a></li> <li><a>Plugins</a></li> <li><a>Add a member</a></li> </ul> </li> <li><a>Invitations</a></li> <li><a>Cloud Storage Environment Settings</a></li> <li><a>Authentication</a></li> </ul> <p class="menu-label">Transactions</p> <ul class="menu-list"> <li><a>Payments</a></li> <li><a>Transfers</a></li> <li><a>Balance</a></li> </ul> </aside> ``` ## Pagination Component ```html <!-- Basic pagination --> <nav class="pagination" role="navigation" aria-label="pagination"> <a class="pagination-previous">Previous</a> <a class="pagination-next">Next page</a> <ul class="pagination-list"> <li><a class="pagination-link" aria-label="Goto page 1">1</a></li> <li><span class="pagination-ellipsis">…</span></li> <li><a class="pagination-link" aria-label="Goto page 45">45</a></li> <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li> <li><a class="pagination-link" aria-label="Goto page 47">47</a></li> <li><span class="pagination-ellipsis">…</span></li> <li><a class="pagination-link" aria-label="Goto page 86">86</a></li> </ul> </nav> <!-- Pagination alignment --> <nav class="pagination is-centered"> <a class="pagination-previous">Previous</a> <a class="pagination-next">Next</a> <ul class="pagination-list"> <li><a class="pagination-link">1</a></li> <li><a class="pagination-link is-current">2</a></li> <li><a class="pagination-link">3</a></li> </ul> </nav> <nav class="pagination is-right"> <a class="pagination-previous">Previous</a> <a class="pagination-next">Next</a> <ul class="pagination-list"> <li><a class="pagination-link">1</a></li> <li><a class="pagination-link is-current">2</a></li> <li><a class="pagination-link">3</a></li> </ul> </nav> <!-- Pagination sizes --> <nav class="pagination is-small"> <a class="pagination-previous">Previous</a> <a class="pagination-next">Next</a> <ul class="pagination-list"> <li><a class="pagination-link">1</a></li> <li><a class="pagination-link">2</a></li> </ul> </nav> <nav class="pagination is-medium"> <a class="pagination-previous">Previous</a> <a class="pagination-next">Next</a> <ul class="pagination-list"> <li><a class="pagination-link">1</a></li> <li><a class="pagination-link">2</a></li> </ul> </nav> <nav class="pagination is-large"> <a class="pagination-previous">Previous</a> <a class="pagination-next">Next</a> <ul class="pagination-list"> <li><a class="pagination-link">1</a></li> <li><a class="pagination-link">2</a></li> </ul> </nav> <!-- Rounded pagination --> <nav class="pagination is-rounded"> <a class="pagination-previous">Previous</a> <a class="pagination-next">Next</a> <ul class="pagination-list"> <li><a class="pagination-link">1</a></li> <li><a class="pagination-link is-current">2</a></li> <li><a class="pagination-link">3</a></li> </ul> </nav> ``` ## Panel Component ```html <!-- Basic panel --> <nav class="panel"> <p class="panel-heading">Repositories</p> <div class="panel-block"> <p class="control has-icons-left"> <input class="input" type="text" placeholder="Search"> <span class="icon is-left"> <i class="fas fa-search"></i> </span> </p> </div> <p class="panel-tabs"> <a class="is-active">All</a> <a>Public</a> <a>Private</a> <a>Sources</a> <a>Forks</a> </p> <a class="panel-block is-active"> <span class="panel-icon"> <i class="fas fa-book"></i> </span> bulma </a> <a class="panel-block"> <span class="panel-icon"> <i class="fas fa-book"></i> </span> marksheet </a> <a class="panel-block"> <span class="panel-icon"> <i class="fas fa-book"></i> </span> minireset.css </a> <a class="panel-block"> <span class="panel-icon"> <i class="fas fa-code-branch"></i> </span> jgthms.github.io </a> <div class="panel-block"> <button class="button is-link is-outlined is-fullwidth"> Reset all filters </button> </div> </nav> <!-- Colored panel --> <nav class="panel is-primary"> <p class="panel-heading">Primary Panel</p> <a class="panel-block is-active"> <span class="panel-icon"> <i class="fas fa-book"></i> </span> Item 1 </a> <a class="panel-block">Item 2</a> </nav> ``` ## Tabs Component ```html <!-- Basic tabs --> <div class="tabs"> <ul> <li class="is-active"><a>Pictures</a></li> <li><a>Music</a></li> <li><a>Videos</a></li> <li><a>Documents</a></li> </ul> </div> <!-- Tabs alignment --> <div class="tabs is-centered"> <ul> <li><a>Pictures</a></li> <li class="is-active"><a>Music</a></li> <li><a>Videos</a></li> </ul> </div> <div class="tabs is-right"> <ul> <li><a>Pictures</a></li> <li><a>Music</a></li> <li class="is-active"><a>Videos</a></li> </ul> </div> <!-- Tabs with icons --> <div class="tabs"> <ul> <li class="is-active"> <a> <span class="icon is-small"><i class="fas fa-image"></i></span> <span>Pictures</span> </a> </li> <li> <a> <span class="icon is-small"><i class="fas fa-music"></i></span> <span>Music</span> </a> </li> <li> <a> <span class="icon is-small"><i class="fas fa-film"></i></span> <span>Videos</span> </a> </li> </ul> </div> <!-- Tabs sizes --> <div class="tabs is-small"> <ul> <li class="is-active"><a>Small</a></li> <li><a>Tabs</a></li> </ul> </div> <div class="tabs is-medium"> <ul> <li class="is-active"><a>Medium</a></li> <li><a>Tabs</a></li> </ul> </div> <div class="tabs is-large"> <ul> <li class="is-active"><a>Large</a></li> <li><a>Tabs</a></li> </ul> </div> <!-- Tabs styles --> <div class="tabs is-boxed"> <ul> <li class="is-active"><a>Boxed</a></li> <li><a>Style</a></li> </ul> </div> <div class="tabs is-toggle"> <ul> <li class="is-active"><a>Toggle</a></li> <li><a>Style</a></li> </ul> </div> <div class="tabs is-toggle is-toggle-rounded"> <ul> <li class="is-active"><a>Rounded</a></li> <li><a>Toggle</a></li> </ul> </div> <!-- Fullwidth tabs --> <div class="tabs is-fullwidth"> <ul> <li class="is-active"><a>Full</a></li> <li><a>Width</a></li> <li><a>Tabs</a></li> </ul> </div> ``` ## Dropdown Component ```html <!-- Basic dropdown (requires JavaScript) --> <div class="dropdown is-active"> <div class="dropdown-trigger"> <button class="button" aria-haspopup="true" aria-controls="dropdown-menu"> <span>Dropdown button</span> <span class="icon is-small"> <i class="fas fa-angle-down"></i> </span> </button> </div> <div class="dropdown-menu" id="dropdown-menu" role="menu"> <div class="dropdown-content"> <a href="#" class="dropdown-item">Dropdown item</a> <a class="dropdown-item">Other dropdown item</a> <a href="#" class="dropdown-item is-active">Active dropdown item</a> <a href="#" class="dropdown-item">Other dropdown item</a> <hr class="dropdown-divider"> <a href="#" class="dropdown-item">With a divider</a> </div> </div> </div> <!-- Hoverable dropdown --> <div class="dropdown is-hoverable"> <div class="dropdown-trigger"> <button class="button"> <span>Hover me</span> <span class="icon is-small"> <i class="fas fa-angle-down"></i> </span> </button> </div> <div class="dropdown-menu"> <div class="dropdown-content"> <div class="dropdown-item"> <p>You can insert any content here.</p> </div> <hr class="dropdown-divider"> <a href="#" class="dropdown-item">Simple link</a> </div> </div> </div> <!-- Dropdown alignment --> <div class="dropdown is-right is-active"> <div class="dropdown-trigger"> <button class="button"> <span>Right aligned</span> <span class="icon is-small"> <i class="fas fa-angle-down"></i> </span> </button> </div> <div class="dropdown-menu"> <div class="dropdown-content"> <a href="#" class="dropdown-item">Dropdown item</a> <a href="#" class="dropdown-item">Other item</a> </div> </div> </div> <!-- Dropdown with JavaScript --> <div class="dropdown" id="myDropdown"> <div class="dropdown-trigger"> <button class="button" aria-haspopup="true"> <span>Click me</span> <span class="icon is-small"> <i class="fas fa-angle-down"></i> </span> </button> </div> <div class="dropdown-menu"> <div class="dropdown-content"> <a href="#" class="dropdown-item">Action</a> <a href="#" class="dropdown-item">Another action</a> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const dropdown = document.getElementById('myDropdown'); const trigger = dropdown.querySelector('.dropdown-trigger button'); trigger.addEventListener('click', () => { dropdown.classList.toggle('is-active'); }); // Close dropdown when clicking outside document.addEventListener('click', (event) => { if (!dropdown.contains(event.target)) { dropdown.classList.remove('is-active'); } }); }); </script> ``` ## Table Component ```html <!-- Basic table --> <table class="table"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Role</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>john@example.com</td> <td>Admin</td> </tr> <tr> <td>Jane Smith</td> <td>jane@example.com</td> <td>User</td> </tr> </tbody> </table> <!-- Table modifiers --> <table class="table is-bordered"> <thead> <tr> <th>Bordered</th> <th>Table</th> </tr> </thead> <tbody> <tr> <td>Cell</td> <td>Cell</td> </tr> </tbody> </table> <table class="table is-striped"> <thead> <tr> <th>Striped</th> <th>Table</th> </tr> </thead> <tbody> <tr> <td>Row 1</td> <td>Data 1</td> </tr> <tr> <td>Row 2</td> <td>Data 2</td> </tr> <tr> <td>Row 3</td> <td>Data 3</td> </tr> </tbody> </table> <table class="table is-narrow"> <thead> <tr> <th>Narrow</th> <th>Table</th> </tr> </thead> <tbody> <tr> <td>Compact</td> <td>Cells</td> </tr> </tbody> </table> <table class="table is-hoverable"> <thead> <tr> <th>Hoverable</th> <th>Table</th> </tr> </thead> <tbody> <tr> <td>Hover</td> <td>Over me</td> </tr> <tr> <td>Row</td> <td>Two</td> </tr> </tbody> </table> <table class="table is-fullwidth"> <thead> <tr> <th>Fullwidth</th> <th>Table</th> </tr> </thead> <tbody> <tr> <td>Takes</td> <td>Full width</td> </tr> </tbody> </table> <!-- Combining table modifiers --> <table class="table is-bordered is-striped is-hoverable is-fullwidth"> <thead> <tr> <th>Product</th> <th>Price</th> <th>Quantity</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>Item A</td> <td>$10</td> <td>5</td> <td>$50</td> </tr> <tr> <td>Item B</td> <td>$15</td> <td>3</td> <td>$45</td> </tr> <tr> <td>Item C</td> <td>$20</td> <td>2</td> <td>$40</td> </tr> </tbody> <tfoot> <tr> <th colspan="3">Total</th> <th>$135</th> </tr> </tfoot> </table> <!-- Table with selected rows --> <table class="table"> <thead> <tr> <th>Name</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>Normal row</td> <td>Active</td> </tr> <tr class="is-selected"> <td>Selected row</td> <td>Highlighted</td> </tr> <tr> <td>Normal row</td> <td>Active</td> </tr> </tbody> </table> ``` ## Tag Component ```html <!-- Basic tags --> <span class="tag">Tag label</span> <!-- Colored tags --> <span class="tag is-primary">Primary</span> <span class="tag is-link">Link</span> <span class="tag is-info">Info</span> <span class="tag is-success">Success</span> <span class="tag is-warning">Warning</span> <span class="tag is-danger">Danger</span> <!-- Light colored tags --> <span class="tag is-primary is-light">Primary</span> <span class="tag is-info is-light">Info</span> <span class="tag is-success is-light">Success</span> <!-- Tag sizes --> <span class="tag is-small">Small</span> <span class="tag is-normal">Normal</span> <span class="tag is-medium">Medium</span> <span class="tag is-large">Large</span> <!-- Rounded tags --> <span class="tag is-rounded">Rounded</span> <span class="tag is-primary is-rounded">Primary Rounded</span> <!-- Tags with delete button --> <span class="tag is-success"> Success <button class="delete is-small"></button> </span> <span class="tag is-danger is-medium"> Danger <button class="delete is-small"></button> </span> <!-- Tag list --> <div class="tags"> <span class="tag">One</span> <span class="tag">Two</span> <span class="tag">Three</span> </div> <!-- Tag addon (attached tags) --> <div class="tags has-addons"> <span class="tag">Package</span> <span class="tag is-primary">Bulma</span> </div> <div class="tags has-addons"> <span class="tag is-dark">Version</span> <span class="tag is-info">1.0.4</span> </div> <div class="tags has-addons"> <span class="tag">npm</span> <span class="tag is-success">v1.0.4</span> <span class="tag is-delete"></span> </div> <!-- Grouped tags --> <div class="field is-grouped is-grouped-multiline"> <div class="control"> <div class="tags has-addons"> <span class="tag is-dark">Technology</span> <span class="tag is-info">CSS</span> </div> </div> <div class="control"> <div class="tags has-addons"> <span class="tag is-dark">Framework</span> <span class="tag is-success">Bulma</span> </div> </div> <div class="control"> <div class="tags has-addons"> <span class="tag is-dark">Language</span> <span class="tag is-warning">Sass</span> </div> </div> </div> ``` ## Progress Bar Component ```html <!-- Basic progress bar --> <progress class="progress" value="15" max="100">15%</progress> <!-- Colored progress bars --> <progress class="progress is-primary" value="30" max="100">30%</progress> <progress class="progress is-link" value="45" max="100">45%</progress> <progress class="progress is-info" value="60" max="100">60%</progress> <progress class="progress is-success" value="75" max="100">75%</progress> <progress class="progress is-warning" value="90" max="100">90%</progress> <progress class="progress is-danger" value="100" max="100">100%</progress> <!-- Progress bar sizes --> <progress class="progress is-small" value="25" max="100">25%</progress> <progress class="progress is-medium" value="50" max="100">50%</progress> <progress class="progress is-large" value="75" max="100">75%</progress> <!-- Indeterminate progress bar (no value attribute) --> <progress class="progress is-primary" max="100">Loading...</progress> <!-- Progress bar in different contexts --> <div class="box"> <p class="mb-2">Upload Progress</p> <progress class="progress is-success" value="65" max="100">65%</progress> </div> ``` ## Level Component ```html <!-- Basic level --> <nav class="level"> <div class="level-left"> <div class="level-item"> <p class="subtitle is-5"> <strong>123</strong> posts </p> </div> <div class="level-item"> <div class="field has-addons"> <p class="control"> <input class="input" type="text" placeholder="Find a post"> </p> <p class="control"> <button class="button">Search</button> </p> </div> </div> </div> <div class="level-right"> <p class="level-item"><strong>All</strong></p> <p class="level-item"><a>Published</a></p> <p class="level-item"><a>Drafts</a></p> <p class="level-item"><a>Deleted</a></p> <p class="level-item"><a class="button is-success">New</a></p> </div> </nav> <!-- Centered level --> <nav class="level"> <div class="level-item has-text-centered"> <div> <p class="heading">Tweets</p> <p class="title">3,456</p> </div> </div> <div class="level-item has-text-centered"> <div> <p class="heading">Following</p> <p class="title">123</p> </div> </div> <div class="level-item has-text-centered"> <div> <p class="heading">Followers</p> <p class="title">456K</p> </div> </div> <div class="level-item has-text-centered"> <div> <p class="heading">Likes</p> <p class="title">789</p> </div> </div> </nav> <!-- Mobile level --> <nav class="level is-mobile"> <div class="level-item has-text-centered"> <div> <p class="heading">Likes</p> <p class="title">123</p> </div> </div> <div class="level-item has-text-centered"> <div> <p class="heading">Retweets</p> <p class="title">45</p> </div> </div> </nav> ``` ## Media Object Component ```html <!-- Basic media object --> <article class="media"> <figure class="media-left"> <p class="image is-64x64"> <img src="https://bulma.io/images/placeholders/128x128.png"> </p> </figure> <div class="media-content"> <div class="content"> <p> <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> <nav class="level is-mobile"> <div class="level-left"> <a class="level-item"> <span class="icon is-small"><i class="fas fa-reply"></i></span> </a> <a class="level-item"> <span class="icon is-small"><i class="fas fa-retweet"></i></span> </a> <a class="level-item"> <span class="icon is-small"><i class="fas fa-heart"></i></span> </a> </div> </nav> </div> <div class="media-right"> <button class="delete"></button> </div> </article> <!-- Nested media objects --> <article class="media"> <figure class="media-left"> <p class="image is-64x64"> <img src="https://bulma.io/images/placeholders/128x128.png"> </p> </figure> <div class="media-content"> <div class="content"> <p> <strong>Barbara Middleton</strong> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> <small><a>Like</a> · <a>Reply</a> · 3 hrs</small> </p> </div> <article class="media"> <figure class="media-left"> <p class="image is-48x48"> <img src="https://bulma.io/images/placeholders/96x96.png"> </p> </figure> <div class="media-content"> <div class="content"> <p> <strong>Sean Brown</strong> <br> Donec sollicitudin urna eget eros malesuada sagittis. <br> <small><a>Like</a> · <a>Reply</a> · 2 hrs</small> </p> </div> </div> </article> <article class="media"> <figure class="media-left"> <p class="image is-48x48"> <img src="https://bulma.io/images/placeholders/96x96.png"> </p> </figure> <div class="media-content"> <div class="content"> <p> <strong>Kayli Eunice</strong> <br> Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. <br> <small><a>Like</a> · <a>Reply</a> · 2 hrs</small> </p> </div> </div> </article> </div> </article> <!-- Media object with form --> <article class="media"> <figure class="media-left"> <p class="image is-64x64"> <img src="https://bulma.io/images/placeholders/128x128.png"> </p> </figure> <div class="media-content"> <div class="field"> <p class="control"> <textarea class="textarea" placeholder="Add a comment..."></textarea> </p> </div> <div class="field"> <p class="control"> <button class="button">Post comment</button> </p> </div> </div> </article> ``` ## Container and Section Layout ```html <!-- Basic container --> <div class="container"> <p>This content is centered and has a maximum width</p> </div> <!-- Container breakpoints --> <div class="container is-widescreen"> <p>Container for widescreen and above</p> </div> <div class="container is-fullhd"> <p>Container for fullhd screens</p> </div> <!-- Max tablet container (v1.0.2+) --> <div class="container is-max-tablet"> <p>Container with max-width up to tablet</p> </div> <!-- Fluid container --> <div class="container is-fluid"> <p>This container is fluid (no max-width)</p> </div> <!-- Section --> <section class="section"> <div class="container"> <h1 class="title">Section</h1> <h2 class="subtitle"> A simple container to divide your page into sections </h2> </div> </section> <!-- Section sizes --> <section class="section is-small"> <div class="container"> <h1 class="title">Small Section</h1> </div> </section> <section class="section is-medium"> <div class="container"> <h1 class="title">Medium Section</h1> </div> </section> <section class="section is-large"> <div class="container"> <h1 class="title">Large Section</h1> </div> </section> <!-- Fullheight section (v1.0.2+) --> <section class="section is-fullheight"> <div class="container"> <h1 class="title">Full Viewport Height Section</h1> </div> </section> <!-- Complete page layout --> <body> <section class="hero is-primary"> <div class="hero-body"> <div class="container"> <h1 class="title">Hero Section</h1> </div> </div> </section> <section class="section"> <div class="container"> <h2 class="title">Content Section</h2> <div class="columns"> <div class="column"> <div class="card"> <div class="card-content">Column 1</div> </div> </div> <div class="column"> <div class="card"> <div class="card-content">Column 2</div> </div> </div> </div> </div> </section> <footer class="footer"> <div class="content has-text-centered"> <p>Footer content</p> </div> </footer> </body> ``` ## Utility Classes - Typography and Spacing ```html <!-- Text alignment --> <p class="has-text-left">Left aligned</p> <p class="has-text-centered">Centered</p> <p class="has-text-right">Right aligned</p> <p class="has-text-justified">Justified text</p> <!-- Text colors --> <p class="has-text-primary">Primary text</p> <p class="has-text-link">Link text</p> <p class="has-text-info">Info text</p> <p class="has-text-success">Success text</p> <p class="has-text-warning">Warning text</p> <p class="has-text-danger">Danger text</p> <p class="has-text-black">Black text</p> <p class="has-text-white">White text</p> <!-- Text weight --> <p class="has-text-weight-light">Light weight</p> <p class="has-text-weight-normal">Normal weight</p> <p class="has-text-weight-medium">Medium weight</p> <p class="has-text-weight-semibold">Semibold weight</p> <p class="has-text-weight-bold">Bold weight</p> <p class="has-text-weight-extrabold">Extra bold weight</p> <!-- Text size --> <p class="is-size-1">Size 1 (3rem)</p> <p class="is-size-2">Size 2 (2.5rem)</p> <p class="is-size-3">Size 3 (2rem)</p> <p class="is-size-4">Size 4 (1.5rem)</p> <p class="is-size-5">Size 5 (1.25rem)</p> <p class="is-size-6">Size 6 (1rem)</p> <p class="is-size-7">Size 7 (0.75rem)</p> <!-- Text decoration --> <p class="is-underlined">Underlined text</p> <!-- Background colors --> <div class="has-background-primary">Primary background</div> <div class="has-background-link">Link background</div> <div class="has-background-info">Info background</div> <div class="has-background-success">Success background</div> <div class="has-background-warning">Warning background</div> <div class="has-background-danger">Danger background</div> <!-- Dynamic colors (v1.0.2+) --> <div class="has-text-current">Current color text</div> <div class="has-text-inherit">Inherited color text</div> <div class="has-background-current">Current color background</div> <div class="has-background-inherit">Inherited color background</div> <!-- Spacing helpers (margin) --> <div class="m-0">No margin</div> <div class="m-1">Margin 0.25rem</div> <div class="m-2">Margin 0.5rem</div> <div class="m-3">Margin 0.75rem</div> <div class="m-4">Margin 1rem</div> <div class="m-5">Margin 1.5rem</div> <div class="m-6">Margin 3rem</div> <div class="m-auto">Auto margin</div> <!-- Directional margins --> <div class="mt-4">Margin top 1rem</div> <div class="mr-4">Margin right 1rem</div> <div class="mb-4">Margin bottom 1rem</div> <div class="ml-4">Margin left 1rem</div> <div class="mx-4">Margin horizontal 1rem</div> <div class="my-4">Margin vertical 1rem</div> <!-- Padding helpers --> <div class="p-0">No padding</div> <div class="p-4">Padding 1rem</div> <div class="pt-4">Padding top 1rem</div> <div class="px-5">Padding horizontal 1.5rem</div> <div class="py-3">Padding vertical 0.75rem</div> <!-- Display helpers --> <div class="is-block">Display block</div> <div class="is-flex">Display flex</div> <div class="is-inline">Display inline</div> <div class="is-inline-block">Display inline-block</div> <!-- Flexbox helpers --> <div class="is-flex is-justify-content-center"> <p>Centered with flexbox</p> </div> <div class="is-flex is-align-items-center" style="height: 100px;"> <p>Vertically centered</p> </div> <!-- Responsive display --> <div class="is-hidden-mobile">Hidden on mobile</div> <div class="is-hidden-tablet">Hidden on tablet</div> <div class="is-hidden-desktop">Hidden on desktop</div> </div> ``` ## Sass Customization ```scss // Override variables before importing Bulma @charset "utf-8"; // Set your brand colors $purple: #8A4D76; $pink: #FA7C91; $brown: #757763; $beige-light: #D0D1CD; $beige-lighter: #EFF0EB; // Update Bulma's global variables $family-sans-serif: "Nunito", sans-serif; $grey-dark: $brown; $grey-light: $beige-light; $primary: $purple; $link: $pink; $control-border-width: 2px; $input-radius: 0; // Import Bulma @use "bulma/sass"; // Add custom styles .my-custom-class { background-color: $primary; padding: 1rem; } ``` ## Build Configuration ```json { "name": "my-bulma-project", "scripts": { "css-build": "sass --style=expanded --source-map styles.scss css/styles.css", "css-watch": "sass --watch --style=expanded --source-map styles.scss css/styles.css" }, "devDependencies": { "sass": "^1.94.2", "postcss-cli": "^11.0.1", "cssnano": "^7.1.2" }, "dependencies": { "bulma": "^1.0.4" } } ``` ## Summary Bulma is designed for rapid web development with its extensive collection of pre-built components and utility classes. The framework is particularly well-suited for building responsive landing pages, admin dashboards, web applications, and marketing sites. Its pure CSS nature makes it framework-agnostic, allowing seamless integration with React, Vue, Angular, or vanilla JavaScript projects. Common use cases include creating card-based layouts for blogs or portfolios, building complex navigation systems with dropdowns, designing form-heavy applications with consistent styling, and implementing responsive grid layouts without writing custom CSS. Version 1.0.0's introduction of CSS Variables enables runtime theming and dark mode support, making Bulma more flexible than ever for modern web applications. The framework's integration patterns are flexible and developer-friendly. For simple projects, include the CDN link and start using classes immediately. For production applications, install via npm/yarn and import only needed components to reduce bundle size. When customization is required, use CSS Variables for runtime changes or Sass variables for build-time customization to create branded themes. Bulma works exceptionally well with component-based JavaScript frameworks through wrapper libraries like Buefy (Vue), Bloomer (React), and rbx (React/TypeScript), or by directly applying classes to framework components. The framework's CSS-only architecture ensures no JavaScript conflicts and gives developers complete control over interactivity implementation. With built-in dark mode, skeleton loaders, responsive utilities, and extensive documentation, Bulma provides everything needed to build modern, accessible, and beautiful web interfaces.
