Learn Bulma - 10 Code Examples & CST Typing Practice Test

Bulma is a modern, open-source CSS framework based entirely on Flexbox. It provides a clean, responsive, and modular approach to building web interfaces without any JavaScript dependencies.

View all 10 Bulma code examples →

Bulma Counter Example Bulma Notification Example Bulma Hero Section Example Bulma Navbar Example Bulma Card Example Bulma Modal Example Bulma Tabs Example Bulma Form Example Bulma Table Example Bulma Breadcrumb Example

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 →

Frequently Asked Questions about Bulma

What is Bulma?

Bulma is a modern, open-source CSS framework based entirely on Flexbox. It provides a clean, responsive, and modular approach to building web interfaces without any JavaScript dependencies.

What are the primary use cases for Bulma?

Responsive websites and web apps. Landing pages and marketing sites. Admin dashboards. Rapid prototyping. Projects requiring minimal JavaScript dependencies

What are the strengths of Bulma?

Fully Flexbox-based for easy layouts. No JavaScript required, lightweight. Simple syntax and modular structure. Responsive and mobile-first by default. Easy to learn for CSS beginners

What are the limitations of Bulma?

No native JavaScript components. Smaller ecosystem than Bootstrap. Some advanced UI components need custom implementation. Limited official themes/templates. Requires additional JS libraries for dynamic interactivity

How can I practice Bulma typing speed?

CodeSpeedTest offers 10+ real Bulma code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

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 →

Frequently Asked Questions about Bulma

What is Bulma?

Bulma is a modern, open-source CSS framework based entirely on Flexbox. It provides a clean, responsive, and modular approach to building web interfaces without any JavaScript dependencies.

What are the primary use cases for Bulma?

Responsive websites and web apps. Landing pages and marketing sites. Admin dashboards. Rapid prototyping. Projects requiring minimal JavaScript dependencies

What are the strengths of Bulma?

Fully Flexbox-based for easy layouts. No JavaScript required, lightweight. Simple syntax and modular structure. Responsive and mobile-first by default. Easy to learn for CSS beginners

What are the limitations of Bulma?

How can I practice Bulma typing speed?

CodeSpeedTest offers 10+ real Bulma code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.