Modern CSS framework based on Flexbox

  • By Jeremy Thomas
  • Last update: Jan 8, 2023
  • Comments: 17

Bulma

Bulma is a modern CSS framework based on Flexbox.

Github npm npm Awesome Join the chat at https://gitter.im/jgthms/bulma Build Status

Bulma: a Flexbox CSS framework

Quick install

Bulma is constantly in development! Try it out now:

NPM

npm install bulma

or

Yarn

yarn add bulma

Bower

bower install bulma

Import

After installation, you can import the CSS file into your project using this snippet:

@import 'bulma/css/bulma.css'

CDN

https://www.jsdelivr.com/package/npm/bulma

Feel free to raise an issue or submit a pull request.

CSS only

Bulma is a CSS framework. As such, the sole output is a single CSS file: bulma.css

You can either use that file, "out of the box", or download the Sass source files to customize the variables.

There is no JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered "environment agnostic": it's just the style layer on top of the logic.

Browser Support

Bulma uses autoprefixer to make (most) Flexbox features compatible with earlier browser versions. According to Can I use, Bulma is compatible with recent versions of:

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Internet Explorer (10+) is only partially supported.

Documentation

The documentation resides in the docs directory, and is built with the Ruby-based Jekyll tool.

Browse the online documentation here.

Related projects

Project Description
Bulma with Attribute Modules Adds support for attribute-based selectors
Bulma with Rails Integrates Bulma with the rails asset pipeline
BulmaRazor A lightweight component library based on Bulma and Blazor.
Vue Admin (dead) Vue Admin framework powered by Bulma
Bulmaswatch Free themes for Bulma
Goldfish (read-only) Vault UI with Bulma, Golang, and Vue Admin
ember-bulma Ember addon providing a collection of UI components for Bulma
Bloomer A set of React components for Bulma
React-bulma React.js components for Bulma
Buefy Lightweight UI components for Vue.js based on Bulma
vue-bulma-components Bulma components for Vue.js with straightforward syntax
BulmaJS Javascript integration for Bulma. Written in ES6 with a data-* API
Bulma-modal-fx A set of modal window effects with CSS transitions and animations for Bulma
Bulma Stylus Up-to-date 1:1 translation to Stylus
Bulma.styl (read-only) 1:1 Stylus translation of Bulma 0.6.11
elm-bulma Bulma + Elm
elm-bulma-classes Bulma classes prepared for usage with Elm
Bulma Customizer Bulma Customizer – Create your own bespoke Bulma build
Fulma Wrapper around Bulma for fable-react
Laravel Enso SPA Admin Panel built with Bulma, VueJS and Laravel
Django Bulma Integrates Bulma with Django
Bulma Templates Free Templates for Bulma
React Bulma Components Another React wrap on React for Bulma.io
purescript-bulma PureScript bindings for Bulma
Vue Datatable Bulma themed datatable based on Vue, Laravel & JSON templates
bulma-fluent Fluent Design Theme for Bulma inspired by Microsoft’s Fluent Design System
csskrt-csskrt Automatically add Bulma classes to HTML files
bulma-pagination-react Bulma pagination as a react component
bulma-helpers Functional / Atomic CSS classes for Bulma
bulma-swatch-hook Bulma swatches as a react hook and a component
BulmaWP (read-only) Starter WordPress theme for Bulma
Ralma Stateless Ractive.js Components for Bulma
Django Simple Bulma Lightweight integration of Bulma and Bulma-Extensions for your Django app
rbx Comprehensive React UI Framework written in TypeScript
Awesome Bulma Templates Free real-world Templates built with Bulma
Trunx Super Saiyan React components, son of awesome Bulma, implemented in TypeScript
@aybolit/bulma Web Components library inspired by Bulma and Bulma-extensions
Drulma Drupal theme for Bulma.
Bulrush A Bulma-based Python Pelican blog theme
Bulma Variable Export Access Bulma Variables in Javascript/Typescript in project using Webpack
Bulmil An agnostic UI components library based on Web Components, made with Bulma & Stencil.
Svelte Bulma Components Library of UI components to be used in Svelte.js or standalone.
Bulma Nunjucks Starterkit Starterkit for Nunjucks with Bulma.
Bulma-Social Social Buttons and Colors for Bulma
Divjoy React codebase generator with Bulma templates
Blazorise Blazor component library with the support for Bulma CSS framework
Oruga-Bulma Bulma theme for Oruga UI

Copyright and license Github

Code copyright 2021 Jeremy Thomas. Code released under the MIT license.

Github

https://github.com/jgthms/bulma

Comments(17)

  • 1

    Add spacing helper

    I'm using Bulma for my recent projects. Really like the framework! One feature that would be really helpful is a 'spacing' helper. See e.g. https://github.com/inuitcss/inuitcss/blob/develop/utilities/_utilities.spacings.scss

    With this option, you can easily add a padding or margin to specific elements like: .u-margin-top {} .u-padding-left-large {} .u-margin-right-small {} .u-padding {} .u-padding-right-none {} .u-padding-horizontal {} .u-padding-vertical-small {}

    Perhaps we can also include the breakpoints into it, like the current 'responsive helpers'. That way we can e.g. set no padding on mobile devices and a top padding on desktops.

    If others think this might be a useful addition, I can create a pull request to incorporate this feature.

  • 2

    Support for sticky footer

    It would be nice if Bulma had built-in support for "sticky footers" as described in https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/.

  • 3

    please namespace all classes

    Please namespace all your classes with the prefix "bulma-" or "b-", because there are a lot of conflicts when using other css frameworks as well. For example, common css-class names such as .card, .panel etc are in conflict. So please namespace all the classes with "b-" ("b-card", "b-panel", etc.).

    Thanks.

  • 4

    Document how to use bulma media query mixins

    This is about the Docs.

    Overview of the problem

    This is about the Bulma Docs I'm using Bulma version [0.7.1]

    Description

    Bulma's media query mixins could be useful for styling custom components while using Bulma. It would be helpful to document this feature (ideally with side-by-side sass/scss examples).

    Thx!

  • 5

    Problem with columnGap property

    Hello Bulma'ers!

    Just catched this WARNING message when compiling my Sass with Webpack

    (Emitted value instead of an instance of Error) postcss-custom-properties: /<project-path>/node_modules/bulma/sass/grid/columns.sass:328:6: Custom property ignored: not scoped to the top-level :root element (.columns.is-variable.is-8 { ... --columnGap: ... })

  • 6

    Form: add file/upload input

    Checklist

    • [x] This is about Bulma the CSS framework and not about the Bulma website
    • [x] I'm using Bulma version [0.1.2]
    • [x] My browser is: Chrome 52 (macOS)
    • [x] This is NOT a Sass issue
    • [x] I am sure this issue is not a duplicate?

    Description

    Please add form file/upload input styles.

  • 7

    Button sizes, could be responsive

    These sizes are great, but useless if we need them to be responsive. Would be great if there was a Bullma-way to make them responsive. Right now I did it myself, but it feels hacky.

    Docs:

    <a class="button is-small">Small</a>
<a class="button">Normal</a>
<a class="button is-medium">Medium</a>
<a class="button is-large">Large</a>

    Hacky code: (not a suggestion)

    @media screen and (max-width: $breakpoint_6)
  .button
    font-size: 15px !important
    &.is-small
      font-size: 13px !important
    &.is-medium
      font-size: 18px !important
    &.is-large
      font-size: 22px !important

@media screen and (max-width: $breakpoint_5)
  .button
    font-size: 14px !important
    &.is-small
      font-size: 12px !important
    &.is-medium
      font-size: 17px !important
    &.is-large
      font-size: 20px !important

@media screen and (max-width: $breakpoint_4)
  .button
    font-size: 13px !important
    &.is-small
      font-size: 11px !important
    &.is-medium
      font-size: 16px !important
    &.is-large
      font-size: 18px !important
  • 8

    Unable to get hero nav hamburger menu to work

    Bulma Version: 0.28 Browser: Tested Chrome & Safari

    Description

    I'm unable to get the hamburger menu to work in hero->nav

    I originally used the example under hero, and have tried mimicking the html used on https://github.com/jgthms/bulma-website

    Steps to Reproduce

    <body>
  <section class="hero is-dark">
    <div class="hero-head">
      <div class="container">
        <nav class="nav">
          <div class="nav-left">
            <a class="nav-item" href="/"><img src="images/logo-small.png" alt=""></a>
          </div>
          <span id="nav-toggle" class="nav-toggle">
          <span></span>
          <span></span>
          <span></span>
          </span>
          <div id="nav-menu" class="nav-right nav-menu">
            <a class="nav-item is-active" href="/">Home</a>
            <span class="nav-item"> <a class="button is-primary" href="#linkhere"><span class="icon"><i class="fa fa-shopping-cart"></i></span><span>Buy</span></a></span>
          </div>
        </nav>
      </div>
    </div>
    <div class="hero-body">
      <div class="container has-text-centered">
        <h1 class="title">hero text</h1>
      </div>
    </div>
  </section>
  ...
</body>

    Any help would be appreciated. I ran through the examples a couple times and checked everything to make sure I wasn't missing a tag or something. The result is that the hamburger menu appears, but clicking it has no effect.

    I put a sample page in index.html of https://github.com/rudedogg/bulma

  • 9

    PLEASE! - use SCSS by default on bulma or implement 2 filetypes...

    Is it about Bulma

    Overview of the problem

    I'm using Bulma version [0.6.1]

    Description

    Hello, I'm starting to study the bulma to apply in a project but I'm having difficulties to use only the SASS framework. is there any way to create it for SCSS? I think it would be interesting to convert since the build API already keeps this native ...

  • 10

    Add list element feature [Fixes #772]

    This is a new feature. How to update the docs/changelog?

    Proposed solution

    It adds a list element which was missing of the most of users

    Testing Done

    I checked in browser how it looks image

  • 11

    Ease the way to change global font size

    Hi,

    why not defining a $html-size variable in order to define a global html text size and then all body text will depend on it.

    for example: $html-size : 10px $body-size: 1.4rem

    html
  background-color: $body-background
  font-size: $html-size
  -moz-osx-font-smoothing: grayscale
  -webkit-font-smoothing: antialiased
  min-width: 300px
  overflow-x: hidden
  overflow-y: scroll
  text-rendering: $render-mode

    Regards

  • 12

    Am I supposed to ignore these vulnerabilities?

    This is about Bulma.

    Overview of the problem

    This is about the Bulma CSS framework

    I'm using Bulma version [0.9.4]

    Description

    I had a site from a couple of years ago working, but my computer died and I had to reinstall Gridsome and Bulma from scratch.

    I seem to finally have this working, but I'm worried about the "58 vulnerabilities (15 moderate, 38 high, 5 critical)".

    It keeps saying:

    To address issues that do not require attention, run:
  npm audit fix

    But if they do not require attention, why bother?

    To address all issues possible (including breaking changes), run:
  npm audit fix --force

    When I've tried that I get in a never ending loop like:

    npm audit fix --force
npm WARN audit Updating gridsome to 0.0.4, which is a SemVer major change.
added 546 packages, removed 263 packages, changed 86 packages, and audited 1694 packages in 18s
--> 376 lines of errors...
79 vulnerabilities (1 low, 44 moderate, 23 high, 11 critical)

npm audit fix --force
npm WARN audit Updating gridsome to 0.7.23, which is a SemVer major change.
added 265 packages, removed 571 packages, changed 85 packages, and audited 1388 packages in 25s
--> 155 lines of (different) errors
37 vulnerabilities (14 moderate, 20 high, 3 critical)

    Seems no escape from that loop, so I quit trying and just ignore the vulnerabilities for now.

    What am I risking? The site it builds seems to work, at least on my machines...

    Steps to Reproduce

    While I'm reporting this, are these bugs, or things I'm supposed to know I need to add?

    Create a site folder:

    $ gridsome create jgthms

$ cd jgthms
$ gridsome develop
Gridsome v0.7.23

DONE  Compiled successfully in 2152ms 
DONE  Compiled successfully in 65ms

    --> Test page worked

    Install Bulma:

    $ npm install bulma
added 1 package, and audited 1410 packages in 3s
51 vulnerabilities (14 moderate, 34 high, 3 critical)

$ gridsome develop
Gridsome v0.7.23

DONE  Compiled successfully in 1689ms
DONE  Compiled successfully in 66ms

    Copy in my site files...

    $ gridsome develop
Gridsome v0.7.23

 ERROR  Failed to compile with 1 errors
This dependency was not found:
* ~/components/Logo.vue in ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/layouts/Default.vue?vue&type=script&lang=js&

    --> Copied 5 files from previous backup:

    $ ls -al src/components/
total 32
drwxr-xr-x 2 loren loren 4096 Dec 30 16:47 .
drwxr-xr-x 8 loren loren 4096 Dec 30 16:41 ..
-rw-r--r-- 1 loren loren  528 Apr  9  2020 Author.vue
-rw-r--r-- 1 loren loren  239 Apr  9  2020 Logo.vue
-rw-r--r-- 1 loren loren 1086 Jan  6  2020 PostCard.vue
-rw-r--r-- 1 loren loren  572 Jan  6  2020 PostMeta.vue
-rw-r--r-- 1 loren loren  364 Dec 11  2019 PostTags.vue
-rw-r--r-- 1 loren loren  173 Dec 29 21:13 README.md
$

    $ gridsome develop
Error: Cannot find module '@gridsome/source-filesystem'

$ npm install @gridsome/source-filesystem
added 6 packages, and audited 1416 packages in 6s
52 vulnerabilities (14 moderate, 35 high, 3 critical)

$ gridsome develop
Error: Cannot find module '@gridsome/plugin-sitemap'

$ npm install @gridsome/plugin-sitemap
added 4 packages, and audited 1420 packages in 3s
52 vulnerabilities (14 moderate, 35 high, 3 critical)

$ gridsome develop
Error: No transformer for 'text/markdown' is installed.

$ npm install @gridsome/transformer-remark
npm WARN deprecated @types/[email protected]: This is a stub types definition. vfile-message provides its own type definitions, so you do not need this installed.
added 84 packages, and audited 1504 packages in 5s
58 vulnerabilities (15 moderate, 38 high, 5 critical)

$ gridsome develop
Error: Cannot find module '@gridsome/remark-prismjs'

$ npm install @gridsome/remark-prismjs
added 9 packages, and audited 1513 packages in 7s
58 vulnerabilities (15 moderate, 38 high, 5 critical)

    And it works!

    Expected behavior

    Seems "npm install bulma" should install those missing files I had to add one-by-one.

    And they should not add even more vulnerabilities.

    Actual behavior

    Rather frustrating for someone who is not an expert at this!

    Also, in case anyone else sees lots of these all over their terminal: egrep: warning: egrep is obsolescent; using grep -E

    https://bbs.archlinux.org/viewtopic.php?id=279614

    Mine was here: node_modules/physical-cpu-count/index.js 2 KB JavaScript File 11/30/2022 5:20:55 PM const output = exec('lscpu -p | egrep -v "^#" | sort -u -t, -k 2,4 | wc -l')

    --> Only called by Linux systems...
    Changed to grep -E Warning gone!

  • 13

    [question]How can we achieve this Horizontal Scrollable Menu with bulma?

    This is about Bulma | the Docs.

    Bulma

    Overview of the problem

    Can't find any example building a Horizontal Scrollable Menu with Bulma in the doc. wonder we can build Horizontal Scrollable Menu with Bulma also does Bulma support PWA?

    Horizontal Scrollable Menu

    Firefox

    Sass 0.9.4

  • 14

    Bulma Documentation PDF

    Overview of the problem

    This is about the Bulma Docs

    I am sure this issue is not a duplicate

    Description

    An idea would be to add a pdf of all the docs so that offline coding is made easier, similar to the Django documentation.

  • 15

    Customizing Vite project variables

    This is about the Docs. It is a question

    Overview of the problem

    This is about the Bulma Docs I am sure this issue is not a duplicate

    Description

    Hi, I have a simple question about Cutomize section in docs: I see that it is possible to customize the variables with different tools, but not with Vite.

    Will this feature be implemented in the future and also the corresponding section?

    Actual behavior

    https://bulma.io/documentation/customize/

  • 16

    Importing bulma in Nuxt 3 config css property causes super slow Vite startup

    This is about Bulma.

    Overview of the problem

    This is about the Bulma CSS framework I'm using Bulma version [0.9.4] My browser is: NA This is a Sass issue: I'm using version [0.9.4] I am sure this issue is not a duplicate?

    Description

    When adding bulma to Nuxt modules, vite server starts up really slowly, up to a minute for some users. It has already been raised as Nuxt and Vite github issues but devs there have said bulma is the cause.

    One interesting comment (https://github.com/nuxt/framework/issues/4613#issuecomment-1339379663) says bulma uses old division code from Bootstrap, which is the underlying cause. Please investigate and issue fix if that is the case.

    Steps to Reproduce

    1. Create new Nuxt project using npx nuxi init nuxt-test
    2. code nuxt-test
    3. yarn install
    4. Start vite server, it starts up within a few seconds
    5. yarn add bulma
    6. Add bulma to css property:
    export default defineNuxtConfig({
  css: [
    'bulma',
  ]
})
    1. Start vite server using yarn dev -o now it takes anywhere from 20 seconds to a minute
    2. Take out bulma from css property and vite will start up in 3 seconds.

    Please see https://github.com/vitejs/vite/issues/11221 and https://github.com/nuxt/framework/issues/4613

    Expected behavior

    Vite should start up quickly, as that is one of its major features.

    Actual behavior

    Vite starts up real slow (possibly due to some division loops within bulma code -- see description)

    With bulma: image

    Without: image

  • 17

    Progress bar uses default color instead of -invert/-light/-dark variants of colors

    This is about Bulma. It is a bug It is not a browser bug as far as I can tell.

    Overview of the problem

    This is about the Bulma CSS framework I'm using Bulma [0.9.4] My browser is: Firefox 107.0.1 (64-bit) I am sure this issue is not a duplicate

    Description

    I have found that the invert/light/dark versions of colours do not work specifically on the bulma progress bar. The color primary-invert/-light/-dark works in other places however coloring the progress bar with any of these it reverts to the default gray colour.

    Steps to Reproduce

    1. Create the following div:

    <progress class="progress is-primary-dark" value="15" max="100"></progress>

    1. Observe the colour is default gray rather than primary-dark

    Expected behavior

    I would expect the bar to be of the color primary-dark

    Actual behavior

    The bar was colored it's default grey colour. As can be seen in the following example image both the title and section are able to take on the primary-dark color while the bar does not.

    <p class="title has-text-primary-dark">Progress</p>
<div class="section has-background-primary-dark">
  <progress class="progress is-primary-dark" value="15" max="100">
  </progress>
</div>

    example

Popular Tag

Related