Adi Chirilov - Sm0ke

Founder @ AppSeed.us

Bulma CSS - Short introduction and Samples

Published Dec 27, 2020Last updated Feb 26, 2021

Hello Coders,

This article is a short introduction to Bulma Css - the popular open-source CSS framework based on Flexbox. For newcomers, Bulma Css is a great alternative to Bootstrap being modular, developer-friendly, and easy to customize. At the and I will mention a few open-source production-ready starters (and commercial) styled with Bulma for all curious minds that read this content.

Thanks for reading! TL;DR;

What is Bulma CSS
How to use/import Bulma CSS
Bulma basics: layouts, elements, components, forms, hero components

Bulma Starters - the short-list for fast runners

(New) BulmaPlay - open-source starter
(Free) Bulma Starter - super simple one page starter
(Free) Bulma Fresh - Playful one-page design styled with Bulma CSS
(Free) Bulma Krypton - Cryptocurrency Starter styled with Bulma CSS
Flask Dashkit - premium Bulma starter
Django Dashkit - premium Bulma starter

Bulma Play

Simple, one-page starter styled with Bulma v0.9.1 released under the MIT license on Github. Being a simple Flask starter, this Bulma-based design can be integrated with ease into any Python-based framework like Django, FastAPI.

BulmaPlay - product page
BulmaPlay Demo - LIVE deployment

Bulma Css - BulmaPlay, open-source starter styled with Bulma.

Bulma Fresh

This is a super simple one-page starter with a hamburger menu and a popup for authentication forms. The UI is crafted by Css Ninja agency and the code can be downloaded directly from Github under the MIT License.

Bulma Fresh - source code

Bulma CSS Fresh - Open-source template project crafted by CSS Ninja

Bulma Krypton

Krypton is a one-page landing page starter built by Css Ninja Studio. Krypton is licensed under the MIT license and based on this permissive license, the UI can be used for unlimited hobby & commercial projects

Bulma Krypton - source code

Bulma CSS Krypton - Open-source multi-page template styled with Bulma.

Flask Dashkit

Admin Dashboard coded in Flask Framework on top of Dashkit Dashboard design (PRO Version) designed by CssNinja.

Flask Dashkit PRO - product page
Flask Dashkit PRO - Demo - LIVE deployment

Bulma Css - Flask Dashkit, premium starter styled with Bulma.

Django Dashkit

Admin Dashboard coded in Django Framework on top of Dashkit Dashboard design (PRO Version) designed by CssNinja.

Django Dashkit PRO - product page
Django Dashkit PRO - Demo - LIVE deployment

Bulma Css - Django Dashkit, premium starter styled with Bulma.

Bulma CSS

A few reasons to use it

Lightweight, modular, and JS Free
Modern Framework - based on Flexbox specifications
Mobile-first, responsive
Built-in components: Cards, Tabs, Menus
Actively supported and versioned by 300+ contributors

To get started with Bulma is quite easy. We can open an editor, create a minimal HTML file that includes Bulma CSS from a CDN source:

<!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">
        <!-- Add Bulma Magic Here -->
    </div>
</body>
</html>

Bulma - Buttons

The code snippet that code some simple buttons is fairly simple:

<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>

The output for this code looks like on this screenshot:

Bulma CSS - UI Buttons.

Bulma - Contact Form

In this section, we will style a contact form with an image on the left and the form fields on the right.

Bulma CSS - Contact Form Component.

The relevant code:

Define a container for all elements: class "container"
Define two columns with 6 rows each: class "column is-6"
The left container will expose the image
The right container will contain the form:

<form>
    <div class="field">
        <div class="control">
            <input class="input" type="email" placeholder="Email">
        </div>
    </div>
    <div class="field">
        <div class="select is-fullwidth">
            <select>
            <option disabled selected>Select product</option>
            <option>Product 1</option>
            <option>Product 2</option>
            <option>Product 3</option>
            </select>
        </div>
    </div>
    <div class="field">
        <div class="control">
            <textarea class="textarea" rows="5"></textarea>
        </div>
    </div>
    <div class="field">
        <div class="control">
            <button class="button is-primary is-fullwidth">Submit</button>
        </div>
    </div>
</form>

Bulma - Team Cards

Using cards for our team or pricing is quite a common component used in many templates. Bulma helps us to code a team section using a minimum CSS code:

Bulma CSS - Team Cards

Let's take a look at the first card and analyze the relevant CSS classes:

<div class="column is-4">
    <div class="level">
        <div class="level-item">
            <figure class="image is-128x128">
                <img class="is-rounded" src="media/team-1.jpg" alt="">
            </figure>
        </div>
    </div>
    <h5 class="title is-5">Angelina Jolie</h5>
    <p class="subtitle is-6">CEO</p>
    <p>When I'm not obsessively stressing ...</p>
</div>

The card width has 4 cells (we need three cards on a row)
The Image has the figure container and the inner "is-rounded" image
The descriptors "is-5" and "is-6" are classes defined for headings objects

Bulma - Hero Component

This component can be invoked by using class "hero" as the main container and this will code a full-width banner on the page.

Bulma CSS - UI Hero Component.

Bulma - Cards

The card component comprises several elements that you can mix and match. All card elements should be bundled inside a "card" container:

card header
card image
card content
card footer

Let's visualize a sample with for cards styled with an inner image, text, and a loading bar.

Bulma CSS - Media Cards.

Here is the code for the first card:

<div class="box">
    <div class="media">
        <div class="media-left">
            <figure class="image is-48x48"><img src="media/icons/folder-o.svg">
            </figure>
        </div>
        <div class="media-content has-text-right">
            <h3 class="title is-1 has-text-info">2</h3>
        </div>
    </div>
    <h4 class="title">Projects</h4>
    <progress class="progress is-info" role="progressbar" value="75" max="100">
    </progress>
</div>

This card can be customized by changing the CSS qualifiers provided by Bulma:

Resize the image by using class is-96x96 (image gets a double size)
Update the Number and class to has-text-warning
Progress bar to use is-success class and value 25 of 100

With all those changes applied, the new layout is:

Bulma CSS - Media Cards Customized.

To learn more about this amazing framework feel free to access the official Bulma CSS website or jump directly and read the docs. To pass over the theory, we can take a look at a few Bulma CSS starters already coded and customized.