Bulma CSS Examples - A curated List

Bulma CSS Examples - A curated List

Hello Coders,

This article presents a curated list with Bulma CSS Examples crafted on top of modern UI Kits by well-known agencies and open-source enthusiasts.  For newcomers, Bulma is a popular open-source CSS framework based on Flexbox, with more than 40k stars on Github and 300+ contributors.  

Thanks for reading! TL;DR; Links
Bulma Css Examples 

What is Bulma and what's so special about Bulma CSS
  • Modern Framework - based on Flexbox specifications
  • Mobile first, responsive
  • Lightweight, modular and JS Free
  • Built-in components: Cards, Tabs, Menus
  • Actively supported and versioned by 300+ contributors

A super simple Bulma Sample (that loads remotely Bulma style) looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bulma CSS - Starter Page</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"  crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" crossorigin="anonymous" />

</head>
<body>
    <div class="container is-fluid">
        <div class="container has-text-centered">
            <button class="button is-primary is-small">Small</button>
            <button class="button is-link">Default</button>
            <button class="button is-warning is-normal">Normal</button>
            <button class="button is-success is-medium">Medium</button>
            <button class="button is-danger  is-large">Large</button>
        </div>
    </div>
</body>
</html>
Bulma Sample - Buttons

For those curious enough to see more, let's move forward with more Bulma Samples.

BulmaPlay

This open-source starter is provided as a super simple Flask codebase (no database or any other hard dependency). The UI kit is a simple one-page design presented later in this list (Bulma Fresh)

Bulma Sample - BulmaPlay

Bulma Krypton

Open-Source Cryptocurrency Starter styled with Bulma CSS. Krypton is an open-source Bulma ICO / Crypto template. The ui can be customised with ease on top existing SAAS/CSS files.

Bulma Sample - Krypton

Flask Dashkit

Dashkit is an incredible Bulma dashboard that comes with numerous customizable and reusable components. The Flask codebase comes with basic modules, database, authentication and deployment scripts.

Bulma Sample - Flask Dashkit

Django Dashkit

Simple Django seed project coded on top of Dashkit PRO crafted by CssNinja. Dashkit features a set of reusable data widgets and a set of social widgets. These widgets can be uses on every page of your dashboard. Of course, these widget libraries will grow with future updates.

Bulma Sample - Django Dashkit

Thanks for reading! For more Bulma-related resources please access:
  • Bulma - the official website
  • Bulma Css - a dedicated marketplace for products styled with Bulma
  • CssNinja - this team provides many Bulma-based products
  • More Bulma Css starters - provided by AppSeed
Show Comments