Learn BULMA with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Bulma Counter Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Counter</title>
</head>
<body class="has-background-light">
    <section class="section">
        <div id="container" class="container has-text-centered box">
        <h2 class="title is-4">Counter: <span id="count">0</span></h2>
        <div class="buttons is-centered mb-4">
        <button id="increment" class="button is-primary">+</button>
        <button id="decrement" class="button is-danger">-</button>
        <button id="reset" class="button is-link">Reset</button>
        </div>
        <button id="theme-btn" class="button is-warning">Switch Theme</button>
        </div>
    </section>
    <script>
        let count = 0;
        let isDark = false;
        const countEl = document.getElementById('count');
        const container = document.getElementById('container');
        document.getElementById('increment').onclick = () => { count++; countEl.textContent = count; };
        document.getElementById('decrement').onclick = () => { count--; countEl.textContent = count; };
        document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
        document.getElementById('theme-btn').onclick = () => {
        isDark = !isDark;
        container.classList.toggle('has-background-dark', isDark);
        container.classList.toggle('has-text-white', isDark);
        container.classList.toggle('has-background-light', !isDark);
        container.classList.toggle('has-text-black', !isDark);
        };
    </script>
</body>
</html>

Demonstrates a simple counter layout using Bulma classes and minimal JavaScript for interactivity.

Let’s Try →

Bulma Notification Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Notification</title>
</head>
<body>
    <section class="section">
        <div class="container">
        <div class="notification is-primary">
        <button class="delete"></button>
        This is a primary notification.
        </div>
        </div>
    </section>
    <script>
        document.querySelectorAll('.notification .delete').forEach(btn => {
        btn.addEventListener('click', () => btn.parentElement.remove());
        });
    </script>
</body>
</html>

Shows how to create dismissible notification boxes using Bulma.

Let’s Try →

Bulma Hero Section Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Hero</title>
</head>
<body>
    <section class="hero is-info is-fullheight">
        <div class="hero-body">
        <div class="container has-text-centered">
        <h1 class="title">Welcome to Bulma</h1>
        <h2 class="subtitle">Simple hero section example</h2>
        </div>
        </div>
    </section>
</body>
</html>

Demonstrates a responsive hero section using Bulma classes.

Let’s Try →

Bulma Navbar Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Navbar</title>
</head>
<body>
    <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
        <a class="navbar-item" href="#">Brand</a>
        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        </a>
        </div>
        <div class="navbar-menu">
        <div class="navbar-start">
        <a class="navbar-item">Home</a>
        <a class="navbar-item">About</a>
        <a class="navbar-item">Contact</a>
        </div>
        </div>
    </nav>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
        const burger = document.querySelector('.navbar-burger');
        const menu = document.querySelector('.navbar-menu');
        burger.addEventListener('click', () => menu.classList.toggle('is-active'));
        });
    </script>
</body>
</html>

Shows how to create a responsive navbar with Bulma.

Let’s Try →

Bulma Card Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Card</title>
</head>
<body>
    <section class="section">
        <div class="container">
        <div class="columns">
        <div class="column is-one-third">
        <div class="card">
        <div class="card-image">
        <figure class="image is-4by3">
        <img src="https://via.placeholder.com/300" alt="Placeholder">
        </figure>
        </div>
        <div class="card-content">
        <p class="title is-4">Card Title</p>
        <p class="content">This is an example card using Bulma.</p>
        </div>
        </div>
        </div>
        </div>
        </div>
    </section>
</body>
</html>

Demonstrates a simple card layout using Bulma classes.

Let’s Try →

Bulma Modal Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Modal</title>
</head>
<body>
    <section class="section">
        <div class="container">
        <button id="openModal" class="button is-primary">Open Modal</button>
        <div id="modal" class="modal">
        <div class="modal-background"></div>
        <div class="modal-content box">Hello, this is a modal!</div>
        <button class="modal-close is-large" aria-label="close"></button>
        </div>
        </div>
    </section>
    <script>
        const modal = document.getElementById('modal');
        document.getElementById('openModal').onclick = () => modal.classList.add('is-active');
        document.querySelectorAll('.modal-close, .modal-background').forEach(el => el.onclick = () => modal.classList.remove('is-active'));
    </script>
</body>
</html>

Shows how to create a modal dialog that can be opened and closed.

Let’s Try →

Bulma Tabs Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Tabs</title>
</head>
<body>
    <section class="section">
        <div class="container">
        <div class="tabs is-centered">
        <ul>
        <li class="is-active"><a>Tab 1</a></li>
        <li><a>Tab 2</a></li>
        <li><a>Tab 3</a></li>
        </ul>
        </div>
        <div id="tabContent" class="content has-text-centered">Content for Tab 1</div>
        </div>
    </section>
    <script>
        const tabs = document.querySelectorAll('.tabs li');
        const content = document.getElementById('tabContent');
        tabs.forEach((tab, i) => tab.onclick = () => {
        tabs.forEach(t => t.classList.remove('is-active'));
        tab.classList.add('is-active');
        content.textContent = 'Content for Tab ' + (i+1);
        });
    </script>
</body>
</html>

Demonstrates a simple tab interface using Bulma.

Let’s Try →

Bulma Form Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Form</title>
</head>
<body>
    <section class="section">
        <div class="container">
        <form>
        <div class="field">
        <label class="label">Name</label>
        <div class="control">
        <input class="input" type="text" placeholder="Your Name">
        </div>
        </div>
        <div class="field">
        <label class="label">Email</label>
        <div class="control">
        <input class="input" type="email" placeholder="Your Email">
        </div>
        </div>
        <div class="control">
        <button class="button is-primary">Submit</button>
        </div>
        </form>
        </div>
    </section>
</body>
</html>

Shows a simple form layout using Bulma form controls.

Let’s Try →

Bulma Table Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Table</title>
</head>
<body>
    <section class="section">
        <div class="container">
        <table class="table is-striped is-hoverable is-fullwidth">
        <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>
        </div>
    </section>
</body>
</html>

Demonstrates a responsive table using Bulma classes.

Let’s Try →

Bulma Breadcrumb Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Breadcrumb</title>
</head>
<body>
    <section class="section">
        <div class="container">
        <nav class="breadcrumb" aria-label="breadcrumbs">
        <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li class="is-active"><a href="#" aria-current="page">Data</a></li>
        </ul>
        </nav>
        </div>
    </section>
</body>
</html>

Shows a breadcrumb navigation using Bulma classes.

Let’s Try →

Code Sample Descriptions

Bulma Counter Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Counter</title>
</head>
<body class="has-background-light">
    <section class="section">
        <div id="container" class="container has-text-centered box">
        <h2 class="title is-4">Counter: <span id="count">0</span></h2>
        <div class="buttons is-centered mb-4">
        <button id="increment" class="button is-primary">+</button>
        <button id="decrement" class="button is-danger">-</button>
        <button id="reset" class="button is-link">Reset</button>
        </div>
        <button id="theme-btn" class="button is-warning">Switch Theme</button>
        </div>
    </section>
    <script>
        let count = 0;
        let isDark = false;
        const countEl = document.getElementById('count');
        const container = document.getElementById('container');
        document.getElementById('increment').onclick = () => { count++; countEl.textContent = count; };
        document.getElementById('decrement').onclick = () => { count--; countEl.textContent = count; };
        document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
        document.getElementById('theme-btn').onclick = () => {
        isDark = !isDark;
        container.classList.toggle('has-background-dark', isDark);
        container.classList.toggle('has-text-white', isDark);
        container.classList.toggle('has-background-light', !isDark);
        container.classList.toggle('has-text-black', !isDark);
        };
    </script>
</body>
</html>

Demonstrates a simple counter layout using Bulma classes and minimal JavaScript for interactivity.

Let’s Try →

Bulma Notification Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Notification</title>
</head>
<body>
    <section class="section">
        <div class="container">
        <div class="notification is-primary">
        <button class="delete"></button>
        This is a primary notification.
        </div>
        </div>
    </section>
    <script>
        document.querySelectorAll('.notification .delete').forEach(btn => {
        btn.addEventListener('click', () => btn.parentElement.remove());
        });
    </script>
</body>
</html>

Shows how to create dismissible notification boxes using Bulma.

Let’s Try →

Bulma Hero Section Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Hero</title>
</head>
<body>
    <section class="hero is-info is-fullheight">
        <div class="hero-body">
        <div class="container has-text-centered">
        <h1 class="title">Welcome to Bulma</h1>
        <h2 class="subtitle">Simple hero section example</h2>
        </div>
        </div>
    </section>
</body>
</html>

Demonstrates a responsive hero section using Bulma classes.

Let’s Try →

Bulma Navbar Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Navbar</title>
</head>
<body>
    <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
        <a class="navbar-item" href="#">Brand</a>
        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        </a>
        </div>
        <div class="navbar-menu">
        <div class="navbar-start">
        <a class="navbar-item">Home</a>
        <a class="navbar-item">About</a>
        <a class="navbar-item">Contact</a>
        </div>
        </div>
    </nav>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
        const burger = document.querySelector('.navbar-burger');
        const menu = document.querySelector('.navbar-menu');
        burger.addEventListener('click', () => menu.classList.toggle('is-active'));
        });
    </script>
</body>
</html>

Shows how to create a responsive navbar with Bulma.

Let’s Try →

Bulma Card Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Card</title>
</head>
<body>
    <section class="section">
        <div class="container">
        <div class="columns">
        <div class="column is-one-third">
        <div class="card">
        <div class="card-image">
        <figure class="image is-4by3">
        <img src="https://via.placeholder.com/300" alt="Placeholder">
        </figure>
        </div>
        <div class="card-content">
        <p class="title is-4">Card Title</p>
        <p class="content">This is an example card using Bulma.</p>
        </div>
        </div>
        </div>
        </div>
        </div>
    </section>
</body>
</html>

Demonstrates a simple card layout using Bulma classes.

Let’s Try →

Bulma Modal Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Modal</title>
</head>
<body>
    <section class="section">
        <div class="container">
        <button id="openModal" class="button is-primary">Open Modal</button>
        <div id="modal" class="modal">
        <div class="modal-background"></div>
        <div class="modal-content box">Hello, this is a modal!</div>
        <button class="modal-close is-large" aria-label="close"></button>
        </div>
        </div>
    </section>
    <script>
        const modal = document.getElementById('modal');
        document.getElementById('openModal').onclick = () => modal.classList.add('is-active');
        document.querySelectorAll('.modal-close, .modal-background').forEach(el => el.onclick = () => modal.classList.remove('is-active'));
    </script>
</body>
</html>

Shows how to create a modal dialog that can be opened and closed.

Let’s Try →

Bulma Tabs Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Tabs</title>
</head>
<body>
    <section class="section">
        <div class="container">
        <div class="tabs is-centered">
        <ul>
        <li class="is-active"><a>Tab 1</a></li>
        <li><a>Tab 2</a></li>
        <li><a>Tab 3</a></li>
        </ul>
        </div>
        <div id="tabContent" class="content has-text-centered">Content for Tab 1</div>
        </div>
    </section>
    <script>
        const tabs = document.querySelectorAll('.tabs li');
        const content = document.getElementById('tabContent');
        tabs.forEach((tab, i) => tab.onclick = () => {
        tabs.forEach(t => t.classList.remove('is-active'));
        tab.classList.add('is-active');
        content.textContent = 'Content for Tab ' + (i+1);
        });
    </script>
</body>
</html>

Demonstrates a simple tab interface using Bulma.

Let’s Try →

Bulma Form Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Form</title>
</head>
<body>
    <section class="section">
        <div class="container">
        <form>
        <div class="field">
        <label class="label">Name</label>
        <div class="control">
        <input class="input" type="text" placeholder="Your Name">
        </div>
        </div>
        <div class="field">
        <label class="label">Email</label>
        <div class="control">
        <input class="input" type="email" placeholder="Your Email">
        </div>
        </div>
        <div class="control">
        <button class="button is-primary">Submit</button>
        </div>
        </form>
        </div>
    </section>
</body>
</html>

Shows a simple form layout using Bulma form controls.

Let’s Try →

Bulma Table Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Table</title>
</head>
<body>
    <section class="section">
        <div class="container">
        <table class="table is-striped is-hoverable is-fullwidth">
        <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>
        </div>
    </section>
</body>
</html>

Demonstrates a responsive table using Bulma classes.

Let’s Try →

Bulma Breadcrumb Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <title>Bulma Breadcrumb</title>
</head>
<body>
    <section class="section">
        <div class="container">
        <nav class="breadcrumb" aria-label="breadcrumbs">
        <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li class="is-active"><a href="#" aria-current="page">Data</a></li>
        </ul>
        </nav>
        </div>
    </section>
</body>
</html>

Shows a breadcrumb navigation using Bulma classes.

Let’s Try →