Home / JavaScript / CSS

Modern CSS framework based on Flexbox

Bulma Bulma is a modern CSS framework based on Flexbox. Quick install Bulma is constantly in development! Try it out now: NPM npm install bulma or Yarn yarn add bulma
Information
Category: JavaScript / CSS
Watchers: 598
Star: 47.7k
Fork: 4k
Last update: Nov 26, 2023
Resource links
http://bulma.io
https://github.com/jgthms/bulma
Popular

Bulma

Bulma is a modern CSS framework based on Flexbox.

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

Copyright and license

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

387 Open More issues
Closed

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.

opened Jan 9, 2017 by qbixx 90
Closed

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

feature 
opened Feb 6, 2016 by soc 61
Closed

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.

bulma feature 
opened Sep 12, 2016 by nimo23 55
Closed

Search for Bulma docs

Please add a search functionality for Bulma docs.

documentation pinned 
opened Oct 17, 2017 by ioan-cristea 52
Closed

Don't forget about RTL direction please

bulma feature is-major pinned 
opened Jan 28, 2016 by elkebirmed 42
Closed

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!

pinned 
opened Apr 22, 2018 by benjaminapetersen 39
Open

Migrate from `@import`-rule to `@use`-rule

This is a improvement/refactoring.

Since the @import-rule is deprecated, this PR switches to the @use-rule.

Usage of single parts of bulma (from within sass/scss) was also pretty fiddly, because not every file imported everything it needed, so you had to add the imports on your own where the order of imports also mattered.

Proposed solution

Essentially I did the three following things:

  • replace all @imports with the corresponding @uses
    • that required some additional @use statements that were missing
    • and required to use the namespaces
  • switch from node-sass to (dart-)sass to be able to use @use
  • add stylelint with scss support to make sure that there are no @imports anymore

What I not did (on purpose):

  • refactor anything else
  • rename anything
  • fix any of stylelints other thrown errors
  • update any other dependency

Tradeoffs

  • to reference variables, you are required to use namespaces, which creates longer names, longer lines and larger files

Testing Done

Projects builds, css output looks good.

Changelog updated?

No.

opened Nov 26, 2023 by DerPipo 0
Open

Table is-narrow not working when applied to the whole table (as in class="table is-narrow")

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

Description

I'm build a website using the Jekyll and the Bulma-clean-theme. I noticed that the modifier "is-narrow" is not being applied to the whole table, So it ends up being fullwidth, regardless of setting the whole table to be "is-narrow".

Steps to Reproduce

Since I'm using Jekyll, I added the table class for the whole table using

| Col1  | Col2  | Col3  | Col4  | Col5  |
|-------|-------|-------|-------|-------|
| blah  | blah  | blah  | blah  | blah  |
| blah  | blah  | blah  | blah  | blah  |
| blah  | blah  | blah  | blah  | blah  |
| blah  | blah  | blah  | blah  | blah  |
{: class="table is-bordered is-narrow is-striped"}

but the table was still in full width.

This theme has an /assets/css/app.scss file that can be used for customization. So I added:

.table {
  &.is-narrow {
    white-space: nowrap;
    width: 1%;
    }
}

This worked and my tables are now using only the proper space.

opened Nov 9, 2023 by CarlosGrohmann 1
Open

$background varable cannot be set with css variable

This is about Bulma.

Overview of the problem

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

Description

Steps to Reproduce

I want to use css variables with Bulma to create a dark/light mode toggle on via the data-theme attribute. Bulma is referenced as npm package and compiled with sass and vite.

I followed Bulma docs to set custom variables, the following code reduced to minimum:

// 1. Import the initial variables
@import "../../node_modules/bulma/sass/utilities/initial-variables.sass";
@import "../../node_modules/bulma/sass/utilities/functions.sass";

// 2. Set your own initial variables
html[data-theme="dark"] {
    --fs-background: #252529;
}

html[data-theme="light"] {
    --fs-background: #f6f6f7;
}

// 3. Set the derived variables
$background: var(--fs-background);

@import "../../node_modules/bulma/bulma.sass";

I also used the steps above to set other variables which worked fine: (other css variables omitted for shorter code)

$scheme-main: var(--scheme-main);
$scheme-invert: var(--scheme-invert);
$text: var(--text);
$text-light: var(--text-light);
$text-strong: var(--text-strong);
$content-blockquote-background-color: var(--fs-background);
$modal-background-background-color: var(--background);
$tabs-boxed-link-hover-background-color: var(--fs-background);

Expected behavior

I expect $background to be replaced just like the others

Actual behavior

I get a compilation error:

image

opened Nov 3, 2023 by Freymaurer 2
Open

Feature/flex is-gap with sizes derived from initial $sizes values

This is a new feature.

Proposed solution

Bulmas is-flex helpers greatly simplifies implementation of flexbox layouts, but a common request is to have gaps between the flexed items. These new is-gap classes greatly simplifies this.
The sizes range from is-gap-1 to is-gap-7 and are derived from the initial $size-X values. The initial sizes are scaled down 1/3 to range between .25rem and 1rem with Bulmas default sizes.

Tradeoffs

This does create a slightly larger css bundle - although not a lot.
It would also be an option to add different gaps for different screen sizes, but this would create an even larger bundle size without adding a lot of value.

Testing Done

Local testing done with all sizes and settings. Works as expected.

Changelog updated?

Yes - I have made a new section for 0.9.5

opened Oct 24, 2023 by daveHylde 0
Open

Problem with example JavaScript for Modal

This is about the Bulma Docs

The example JavaScript on https://bulma.io/documentation/components/modal/ has the following block:

// Add a keyboard event to close all modals
document.addEventListener('keydown', (event) => {
  if (event.code === 'Escape') {
    closeAllModals();
  }
});

This does not work on Chrome (118.0.5993.88) on a Mac (13.5.2)

I replaced it with:

// Add a keyboard event to close all modals
document.addEventListener("keydown",function(e){
  if(e.key === "Escape") {
    closeAllModals();
  }
});

I have tested this solution on Chrome and Firefox on a Mac and on Edge on Windows.

opened Oct 23, 2023 by rgalea 0
Open

New Feature: Tabs with Content Box and Pages.

This is a new feature.

See demo: https://erbsland-dev.github.io/bulma-tab-box-demo/

Introduction

In enhancing the user experience with tabbed content, this feature aims to introduce a visually appealing and functional content box situated directly beneath the tabs in Bulma. This design allows users to quickly associate content with the selected tab, as showcased in the demo. It provides a seamless integration between tabs and their respective content, offering both static and dynamic content display options.

Proposed Feature

This pull request introduces elements for content with pages located beneath the tabs created using the tabs element. The new tabs-box, tabs-content, and tabs-page elements provide a standardized framework for adding dynamically displayed tabbed content.

  • These elements are optional, enabling tabs to be used without any content.
  • The elements can also be used to display static content by simply having a single page marked with is-active.
  • By utilizing these predefined elements:
    • The script for toggling and presenting individual pages can be standardized and simplified.
    • Themes can style the box where the tabbed content appears.

Tradeoffs

This feature introduces a few more elements and variables to the framework. Ideally, there should be a standalone solution for paged content where only one page is visible at a time. Such a concept could then be applied to future design elements, like collapsible sections and similar UI concepts.

Testing Done

  • I tested the tabs box with various styles using the default colors and encountered no issues.
  • I've set up a demo page: https://erbsland-dev.github.io/bulma-tab-box-demo/

Changelog Updated?

Yes.

opened Oct 11, 2023 by erbsland-dev 0

Contents

    nachoaIvarez Unopinionated, standard compliant flexbox component. No propietary APIs. Nothing but flexbox.
    inamiy Swift wrapper of facebook/yoga (CSS Flexbox layout engine).
    thomaspark Flexbox Froggy is a game for learning CSS flexbox. 🐸
    jfet97 A new flexbox based CSS micro-framework.
    tmoreton useful.ly Flexbox-Based CSS Framework
    ChristopherHauschild Aplicação desenvolvida em React que simula a utilização do CSS Flexbox
    1000ch A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).
    StefanKovac HTML layout helper based on CSS flexbox specification —
    robinweser Layout Components for React based on Flexbox
    roylee0704 A set of React components implementing flexboxgrid with the power of CSS Modules.
    kjk Go implementation of CSS flexbox layout algorithm, port of Facebook's Yoga
    jordwalke Reason CSS Flexbox implementation
    vladocar Katana is CSS Layout System made with Flexbox
    malikoski FlexBoxFX is a JavaFX implementation of CSS3 flexbox.
    tcoopman React flexbox implementation
    philipwalton A community-curated list of flexbox issues and cross-browser workarounds for them.
    buildo A powerful React component to abstract over flexbox and create any layout on any browser
    layoutBox FlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementation. Concise, intuitive & chainable syntax.
    yisar Yoga alternative
    web-tiki CSS responsive grid of hexagons
    picturepan2 Spectre.css - A Lightweight, Responsive and Modern CSS Framework
    Share this repo

    Related Repos


    CSS
    19
    Lista de conteúdo de hacking e segurança da informação feita inteiramente para BR
    luca-regne Hacking para brasileiros Coletânea de links e fontes de conteúdo brasileiro sobre hacking, segurança da informação e tópicos relacionados. Aviso Legal
     
    CSS
    7
    Firefox theme for catppuccin
    CelestialN3ko Catppuccin Theme for Firefox (Unofficial) This is an unofficial theme Themes Dark Rosewater Flamingo Mauve Pink Maroon Red Peach Yellow Green Teal Blu
     
    CSS
    5
    Repositório para os arquivos do curso de Angular do Hora de Codar no YouTube.
    matheusbattisti Teoria This project was generated with Angular CLI version 13.1.2. Development server Run ng serve for a dev server. Navigate to http://localhost:4200
     
    CSS
    4
    A tech guy with finance as his core competency
    ChintzRuparel Hi 👋 , I'm Chintz Ruparel A tech guy with finance as his core competency 🔭 I’m currently working on TWODS Capital 🌱 I’m currently learning AMP, REA
     
    CSS
    4
    Simple & Quick Access Addon For Homer Dashboard
    varunsridharan Homer Dashboard - Firefox Addon Quick Access Homer Dashboard - Firefox Addon Usage Install Addon [ Firefox ] Configure The Addon Add The Quick Access
     
    CSS
    3
    Portfolio template built with plain html, css and JavaScript
    CommunityPro Portfolio Template - HTML Build your portfolio using this super easy template. Free to use if you are a member of the community or a contributor to th
     
    CSS
    8
    Material for ProLaLa Keynote
    dsyme ProLaLa2022 Archival material for "Programming Languages and the Law" 2022 Keynote by: Davin Fifield – VP Product Development, Oracle Surend Dayal – P
     
    CSS
    8
    Tina working with Astro using Tina Admin
    perkinsjr Astro working with Tina This experience is a conceptual idea behind how to use Tina with pure SSG on Astro. This also may be subject to change in the
     
    CSS
    12
    Como criar um cluster ou multi-cluster Kubernetes localmente, em uma máquina Windows, util...
    jacunha Este guia tem a finalidade de orientar como criar um cluster kubernetes com um ou mais nós , e/ou multi-cluster em um computados com sistema operacional Windows 10 ou 11, utilizando o Hyper-V (nativo do Windows), para provisionar máquinas virtuais e Minikube (para provisionar clusters kubernetes localmente) a fim de auxiliar nos estudos da tecnologia para quem não dispõe de uma ambiente Linux.
     
    CSS
    366
    AWS Inventory in a single HTML file using JS AWS-SDK & Bootstrap
    devops-israel AWS Inventory A single-file that shows the whole inventory of your AWS services on a single page. Usage Clone or copy the index.html file to your comp
     
    CSS
    9
    Lit + File Based Routing + Nested Layouts
    rodydavis Lit File Based Routing Lit router for nested layouts and file based routing. Similar to https://remix.run/ but at client side. Demo Package Archived i
     
    CSS
    14
    PostgreSQL Editor and Dashboard
    prostgles Prostgles UI Web dashboard and SQL Editor for Postgres Screenshots More Features SQL Editor with schema auto-completion and useful hints Data edit and
     
    CSS
    5
    Soothing pastel theme for GitHub
    catppuccin Catppuccin for GitHub Usage Install an extension called Redefined GitHub Right Click on the extension Go to options/preferences (depends on the browse
     
    CSS
    3
    fxhash template by Matt Circles
    MatthieuSegret fxhash template by Matt Circles This is the template I use to start a new project on fxhash. It is agnostic of any framework: p5js, threejs, etc. You
     
    CSS
    3
    Lista de componentes Tailwind para VueJS / NuxtJs / ...
    Karytonn Componentes TailwindCSS Lista de componentes Tailwind para VueJS / NuxtJs / ... Tailwind.io Tailwind Elements Tailwind.cc Maraki UI Criative TIM Tail