What is Bulma CSS

Bootstrap has always been a solid and framework, very well documented, widely used, but why not consider other players like Bulma CSS, the new breeze in the CSS Frameworks horizon.

Open-Source CSS framework based on Flexbox

Designed to be responsive, modular. Javascript Free

Before jumping into details let's see what we can build with this CSS Framework:

Get Bedtime Stories

The bedtime story app for families - Made with Bulma Css

Getbedtimestories.com - App made with Bulma CSS.

ySimplicity

A creative web agency - Made with Bulma Css

ySimplicity.com - App made with Bulma CSS.

BulmaPlay

Open-Source App - Built with Bulma CSS

BulmaPlay - Free App made with Bulma CSS.

BulmaLanding

Open-Source App - Built with Bulma CSS

BulmaLanding - Made with Bulma CSS.

Getting started

Let's built a minimal Bulma website

Starting your development with Bulma it's quite easy: you need only 1 file. let's build your first page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="/css/bulma.min.css">
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        <span style="color: blue">Hello</span> World
      </h1>
      <p class="subtitle" style="color: purple">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

How to use Bulma CSS

simple introduction into the documentation

Bulma Css - add it to your project
  • Install Bulma via NPM
    npm install bulma
  • Load from CDN
    https://cdnjs.com/libraries/bulma
  • Download from the official repository

Bulma CSS - Modularity, just include what you need
  • Include the dependencies
    @import "bulma/sass/utilities/_all.sass"
    @import "bulma/sass/grid/columns.sass"
  • Code your magic
<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>
Bulma CSS - Grid System

Bulma CSS - Responsiveness, vertical by default

Every element in Bulma is mobile-first and optimizes for vertical reading, so by default on mobile:

Bulma CSS - Responsiveness

Bulma Css - Colors

Most elements and components have color variations thanks to modifiers with syntax .is-$color, like is-primary or is-dark. This is thanks to the $colors

Bulma CSS - Starters

Apps to start fast your development

Related resources:

Thank You!

Show Comments

Get the latest posts delivered right to your inbox.