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: 605
Star: 46.9k
Fork: 3.9k
Last update: Mar 11, 2023

Resource links

http://bulma.io

https://github.com/jgthms/bulma

README
Issues 348

Popular

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

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

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

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 57

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

Update navbar docs

This is a documentation fix.

for browser accessibility support the hamburger menu should be a button. An anchor is for navigation, a button is for an action like a toggle. Semantic HTML should be used whenever possible.

Proposed solution

Currently the hamburger menu shows an anchor tag for the button which does not allow for it to be focusable out of the box. It should be a button tag because it's performing an action and not navigating the user to a new page. You can read more about the difference between anchor tags and buttons here

Tradeoffs

Testing Done

None.

Changelog updated?

No.

opened Mar 13, 2023 by aleavikraman 0

Open

Bump GitHub actions, fixing typos

This PR bumps action versions in the GitHub workflow file. It also fixes a few typos I spotted and it also converts some links from http to https protocol.

opened Feb 27, 2023 by deining 0

Open

can't find class `dropdown-trigger`

This is about the Docs.

Description

at https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable, class dropdown-trigger class was used.

but when I copy the demo to a pure html project, it does not work.

and not found anything at https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css by search string dropdown-trigger.

opened Feb 16, 2023 by winary 1

Open

Fix form field-label alignment for rtl

This is a bugfix for a small rtl issue with field-label. It should align the other way.

Before:

After:

Testing Done

Visual inspection locally.

Changelog updated?

No.

opened Feb 12, 2023 by idank 1

Open

Added is-fullheight-with-spaced-navbar modifier for navbars that use is-spaced.

This is an improvement.

Proposed solution

Currently the hero layout with is-fullheight-with-navbar fails to account for is-spaced navbars resulting in an extra space at the bottom of the page. This PR adds a new modifier is-fullheight-with-spaced-navbar so that the spacing is accounted for on desktop and higher.

This problem has already been addressed in issue #2845 which in turn ended up going stale.

Tradeoffs

Users must now decide between is-fullheight-with-navbar and is-fullheight-with-spaced-navbar but we already differentiate between fixed-bars and regular bars so I don't see this as an unnecessary complication.

Testing Done

Minimal example:

<nav class="navbar is-light is-spaced" role="navigation">
  <div class="navbar-brand">
  </div>
</nav>
<section class="hero is-info is-fullheight-with-spaced-navbar">
  <div class="hero-body">
  </div>
</section>

Note how the page does not scroll when with-spaced-navbar is used.

Changelog updated?

No.

opened Feb 10, 2023 by rayment 0

Open

Bump http-cache-semantics from 4.1.0 to 4.1.1

Bumps http-cache-semantics from 4.1.0 to 4.1.1.

Commits

2449650 Update mocha
560b2d8 Don't use regex to trim whitespace
b1bdb92 Remove linting package zoo
c20dc7e Cache 308
See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies

opened Feb 3, 2023 by dependabot[bot] 0

Unopinionated, standard compliant flexbox component. No propietary APIs. Nothing but flexbox.

Swift wrapper of facebook/yoga (CSS Flexbox layout engine).

Flexbox Froggy is a game for learning CSS flexbox. 🐸

A new flexbox based CSS micro-framework.

useful.ly Flexbox-Based CSS Framework

Aplicação desenvolvida em React que simula a utilização do CSS Flexbox

A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).

HTML layout helper based on CSS flexbox specification —

Layout Components for React based on Flexbox

A set of React components implementing flexboxgrid with the power of CSS Modules.

Go implementation of CSS flexbox layout algorithm, port of Facebook's Yoga

Reason CSS Flexbox implementation

Katana is CSS Layout System made with Flexbox

FlexBoxFX is a JavaFX implementation of CSS3 flexbox.

React flexbox implementation

A community-curated list of flexbox issues and cross-browser workarounds for them.

A powerful React component to abstract over flexbox and create any layout on any browser

FlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementation. Concise, intuitive & chainable syntax.

Yoga alternative

CSS responsive grid of hexagons

Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Share this repo

Related Repos

CSS

Lista de conteúdo de hacking e segurança da informação feita inteiramente para BR

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

Firefox theme for catppuccin

Catppuccin Theme for Firefox (Unofficial) This is an unofficial theme Themes Dark Rosewater Flamingo Mauve Pink Maroon Red Peach Yellow Green Teal Blu

CSS

Repositório para os arquivos do curso de Angular do Hora de Codar no YouTube.

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

A tech guy with finance as his core competency

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

Simple & Quick Access Addon For Homer Dashboard

Homer Dashboard - Firefox Addon Quick Access Homer Dashboard - Firefox Addon Usage Install Addon [ Firefox ] Configure The Addon Add The Quick Access

CSS

Portfolio template built with plain html, css and JavaScript

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

Material for ProLaLa Keynote

ProLaLa2022 Archival material for "Programming Languages and the Law" 2022 Keynote by: Davin Fifield – VP Product Development, Oracle Surend Dayal – P

CSS

Tina working with Astro using Tina Admin

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

Como criar um cluster ou multi-cluster Kubernetes localmente, em uma máquina Windows, util...

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

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

Lit + File Based Routing + Nested Layouts

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

PostgreSQL Editor and Dashboard

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

Soothing pastel theme for GitHub

Catppuccin for GitHub Usage Install an extension called Redefined GitHub Right Click on the extension Go to options/preferences (depends on the browse

CSS

fxhash template by Matt Circles

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

Lista de componentes Tailwind para VueJS / NuxtJs / ...

Componentes TailwindCSS Lista de componentes Tailwind para VueJS / NuxtJs / ... Tailwind.io Tailwind Elements Tailwind.cc Maraki UI Criative TIM Tail