# Bulma CSS — Code Examples & Common Patterns Practical, copy-paste-ready patterns for building with Bulma. --- ## Page Skeleton ```html My Bulma Page ``` --- ## Navbar with Burger Menu ```html ``` --- ## Hero Section ```html

Welcome to My App

A modern web experience

Get Started Learn More
``` ### Fullheight Hero with Navbar ```html

Centered Hero

With head and foot

``` --- ## Responsive Columns ### Three Equal Columns ```html
Column 1
Column 2
Column 3
``` ### Sidebar Layout ```html

Main Content

This area fills the remaining space.

``` --- ## Card Grid ```html
Card image
Avatar

John Doe

@johndoe

Lorem ipsum dolor sit amet. #bulma
``` --- ## Login Form ```html

Login

Forgot password? · Sign up

``` --- ## Contact Form (Horizontal) ```html

This email is valid

``` --- ## Input Addons ```html
$
Pay
``` --- ## Modal with JavaScript ```html ``` --- ## Notification with Dismiss ```html
Warning! Please check your input before submitting.
``` --- ## Pricing Table ```html

Free

$0/mo

  • 1 User
  • 5 GB Storage
  • Priority Support
Popular

Pro

$29/mo

  • 10 Users
  • 100 GB Storage
  • Priority Support

Enterprise

$99/mo

  • Unlimited Users
  • 1 TB Storage
  • 24/7 Support
``` --- ## Dashboard Layout (Sidebar + Content) ```html

Users

3,456

Revenue

$12,345

Orders

789

Recent Activity

UserActionDateStatus
AliceCreated accountApr 7, 2026 Active
BobUpdated profileApr 6, 2026 Pending
``` --- ## Media Object (Comment Thread) ```html

Alice @alice 2 hours ago
Great article! Really enjoyed reading this.

Bob @bob 1 hour ago
Thanks Alice! Glad you liked it.

``` --- ## Tags with Addons ```html
npm v1.0.4
build pending
JavaScript CSS Bulma
``` --- ## Breadcrumb Navigation ```html ``` --- ## Sass Customization Example ```scss // my-bulma.scss // 1. Override initial variables $primary: #6366f1; // Indigo $info: #06b6d4; // Cyan $success: #10b981; // Emerald $warning: #f59e0b; // Amber $danger: #ef4444; // Red $family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; $radius: 8px; $radius-small: 4px; $radius-large: 12px; // 2. Override derived variables $link: $primary; $scheme-main: #fafbfc; $scheme-main-bis: #f0f2f5; // 3. Import Bulma @import "bulma/bulma"; // 4. Your custom styles (after Bulma) .card { transition: transform 0.2s, box-shadow 0.2s; &:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } } ``` --- ## Dark Mode Toggle ```html ``` --- ## Grid (v1.x) — Responsive Product Grid ```html

Product 1

Product 2

Product 3

Product 4

``` --- ## Level (Stats Bar) ```html

Tweets

3.2K

Following

245

Followers

12.5K

Likes

8.9K

``` --- ## Panel (Filterable List) ```html ```