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

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

Browser testing via

Copyright and license

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

Bulma Changelog

1.0.3

Bug Fixes

• Fix #3842: restore use of $easing, $radius-rounded and $speed Sass variables
• Fix #3920: migrate code to avoid Sass 1.80 deprecation warning of global built-in functions
• Fix #3822: Non-minified version of bulma-prefixed was missing
• Fix #3805: helper classes were missing prefix

Documentation Fixes

• Fix #3904, #3884: fix website horizontal overflow
• Fix #3849: fix Light Mode color swatches in Dark Mode
• Fix #3918: broken placeholder images
• Fix #3926: broken documentation hero

1.0.2

Improvements

• Smart Grid is-col-min now goes up to 32 (Fixes #3829)
• Remove need for is-variable modifier for Column gaps
• You can have a list of radio buttons or checkboxes with the radios and checkboxes classes respectively
• Add is-max-tablet modifier to the Container element
• Add currentColor and inherit as possible values for the color and background helpers
• The Section can now have a minimum height of 100vh with the is-fullheight modifier
• Add more SCSS variables:
  • $input-border-style
  • $input-border-width
  • $label-spacing
  • $field-block-spacing
• Add more CSS variables:
  • --bulma-input-border-style
  • --bulma-input-border-width
  • --bulma-label-color
  • --bulma-label-spacing
  • --bulma-label-weight
  • --bulma-help-size
  • --bulma-field-block-spacing

Bug fixes

• Fix #3824: ability to override $scheme-h, $scheme-s, $dark-l and $light-l Sass variables
• Fix #3830: add remaining logical properties
• Fix #3743: make sure 12 columns system take up whole width
• Fix #3799: restore variable columns
• Fix #3846: restore --bulma-column-gap CSS variable
• Fix #3775: has-background helpers should only affect element it's applied to
• Fix #3856: Sass nested rule deprecation warning
• Fix #3757: restore use of $navbar-burger-color

1.0.1

Bug fixes

• Fix #3755: .select colors
• Fix #3736: include helpers in "No Dark Mode" version
• Fix #3744: build non-minified versions
• Fix #3747: ability to nest fixed grids
• Fix #3759: remove unused .skeleton class
• Fix #3786: fix horizontal padding of rounded buttons

Documentation fixes

• Fix #3725
• Fix #3720
• Update online documentation link in README
• Update migrating-to-v1.html
• Fix #3735
• Fix #3729: explain how to use Bulma in a modular way
• Fix #3785: make use of the @prefers-reduced-motion setting
• Fix #3758: broken links for 0.9.4 version
• Fix #3760: fix form controls typo

Improvements

• Fix #3737: Move sass to devDependencies

1.0.0

Bulma v1 is a full rewrite of the framework using Dart Sass, which is the the primary implementation of Sass. While this affects a few development details, everything has been done to make the transition as easy as possible.

What remains the same

All HTML snippets are the same. This means you don't need to update your markup. This is important because it means, if you're using Bulma straight "out of the box", you don't need to change anything.

You can just swap `bulma@0.9.4/css/bulma.min.csswithbulma@1.0.0/css/bulma.min.css` and everything will work. Things will look slightly different, but they will still work.

What changes

• Dart Sass is used to build Bulma
  • if you use the sass npm package, you're already using Dart Sass
• CSS Variables are used instead of literals: color: var(--bulma-primary); instead of color: hsl(171deg, 100%, 41%);, which means you can customize Bulma with CSS only (without using Sass)
• Customization by setting your own value for Sass variables works differently. See how to customize Bulma with Sass.

What's new (i.e. did not exist before)

• The notion of Themes is introduced: a theme is a collection of CSS variables within a context, and is the best approach to customize Bulma
• As a result, a Theme for Dark Mode is included
• Color Palettes are created for each of the 7 primary colors
• Skeleton loaders exist as standalone components but also as variants of other components
• You can add a prefix to all your Bulma classes so that .button becomes .my-prefix-button
  • a pre-built prefixed version exists as one of the alternative versions

0.9.4

New features

• Responsive buttons: the size of a button will change for each breakpoint (Fix #1572)
• @mixin between: takes 2 breakpoint values, outputs a media query for the range between these 2 values
• $breakpoints Sass map: a map of named breakpoints and their type (from, until or both)
• @mixin breakpoint: uses the new $breakpoints Sass map to output a media query

Improvements

• Add missing variables for content customization
• Fix #683 Modal - example javascript toggle
• Fix #3461 Bulma logo with wordmark in SVG
• Fix #3383 'Variables' sections on docs page (#3513)
• Fixes #3510 The navbar overlaps with sidebars in "Fullheight hero with navbar" (#3516)
• Setup Cypress testing (#3436)

Bugfix

• Replace disabled attr on pagination anchor elements with is-disabled

• 3500 Fix hidden disabled buttons on iOS 15.4 (#3521)

• 3076 Fix Table headers centered aligned in Safari

0.9.3

New features

• New is-underlined class for underlined text and links
• New auto value for margin and padding helper classes

Improvements

• New $section-padding-desktop Sass variable
• New $hero-body-padding-tablet Sass variable
• New $shadow Sass variable (used for .box, .card, .dropdown and .panel)
• Add is-normal size modifiers to .file and .content
• New %reset placeholder

Bugfix

• 3362 Fix slash divide

0.9.2

Breaking change

To fix duplicate imports, all Sass placeholders have moved from the utilities/mixins file to its own utilities/extends file.

The Sass placeholders are:

• %control
• %unselectable
• %arrow
• %block
• %delete
• %loader
• %overlay

If you were importing them directly from utilities/mixins, you'll need to import utilities/extends instead.
If you were importing utilities/_all or even bulma.sass directly, no change is required.

New features

• Fix #1583 New is-ghost button that behaves / looks like a regular link
• New icon-text component, to combine an icon with text on its side

Bug fixes

• 3005 Fix column offsets in RTL

• Fix #3145 Dropdown content is bounded by a parent card
• Fix #3089 Sub columns of a variable columns have weird gap
• Fix #2937 Add width: unset for narrow columns

• 3208 Fix #3163 Do not override is-rounded with button-small

• 3216 Removed duplicate mixins imports, created a single extends file

• 3216 Removed all references to the .sass file extension have been removed, since they're unnecessary when there's no ambiguity between a .sass file or a .scss file

Improvements

• Fix #3012 Add $media-* variables, set to !default
• Fix #2797 Import dependencies individually for each component
• Remove list style from pagination list

0.9.1

New features

• 3047 Flexbox helpers

• 3085 Add is-clickable helper

• 3086 Allow each component to have its own colors and default to global ones

• New variables $navbar-colors, $button-colors, $notification-colors, $progress-colors, $table-colors, $tag-colors, $file-colors, $textarea-colors, $select-colors, $form-colors, $label-colors and $hero-colors

Improvements

• 2630 Fixes #2598 -> Add $card-radius variable

• Add $card-overflow variable

• 2540 Fixes #2539 -> Fix indeterminate progress styling in IE11

• 3057 Make the default text color of $code listings more accessible

• 3088 Adds not allowed cursor to missing inputs

• 3101 Add $modal-breakpoint variable for modal breakpoint

• 3107 Add optgroup to generic.sass

0.9.0

Deprecation warning

The base/helpers.sass file is deprecated. It has moved into its own /helpers folder. If you were importing base/helpers.sass or base/_all.sass, please import sass/helpers/_all.sass now. If you were simply importing the whole of Bulma with @import "~/bulma/bulma.sass" or similar, you won't have to change anything, and everything will work as before.

The list component is also deprecated: the components/list.sass file has been deleted. It was never officially supported as it was too similar to panel component. Use that one instead.

RTL support

Bulma now has RTL support.

By setting the Sass flag $rtl to true, you can create an RTL version of Bulma, thanks to 4 new Sass mixins:

• =ltr
• =rtl
• =ltr-property($property, $spacing, $right: true)
• =ltr-position($spacing, $right: true)

The Bulma package now also comes with a bulma-rtl.css and bulma-rtl.min.css file to be used straight away.

Spacing helpers

Bulma now has spacing helpers: https://bulma.io/documentation/helpers/spacing-helpers/

Bulma provides margin m* and padding p* helpers in all directions:

• *t for top
• *r for right
• *b for bottom
• *l for left
• *x horizontally for both left and right
• *y vertically for both top and bottom

You need to combine a margin/padding prefix with a direction suffix. For example:

• for a margin-top, use mt-*
• for a padding-bottom, use pb-*
• for both margin-left and margin-right, use mx-*

Each of these property-direction combinations needs to be appended with one of 6 value suffixes

This release also includes the following helpers:

• light and dark color helpers
• light and dark background color helpers

Improvements

• 2925 Center table cell content vertically with is-vcentered

Bug fixes

• 2955 Fix issue when there's only one is-toggle tag

0.8.2

Bug fixes

• Fix #2885 -> Revert $input-color: $text-strong

0.8.1

Improvements

• 2709 Add light colors to the notification element

• 2740 Fixes #2739 -> Add variables size for layout hero

• Fix #2741 -> Create bulmaRgba() function to support inherit value

• 2756 Add $button-text-decoration variable

Bug fixes

• 2664 Fixes #2671 -> Add $panel-colors variable

0.8.0

Big update

Larger form controls

Controls and buttons are now 2.5em high. You can revert this resizing by setting these previous values:

$control-height: 2.25em
$control-padding-vertical: calc(0.375em - #{$control-border-width})
$control-padding-horizontal: calc(0.625em - #{$control-border-width})
$button-padding-vertical: calc(0.375em - #{$button-border-width})
$button-padding-horizontal: 0.75em

Light and dark colors

Each main color ("primary", "info", "success", "warning", "danger") now has a *-light and *-dark version. They are calculated using 2 new color functions:

• findLightColor() which finds the light version of a color
• findDarkColor() which finds the dark version of a color

The light colors are used by the button element, while the light and dark colors are used by the message component.

Panel colors

The panel component is now available in all the different colors.

4-value color map

The $colors Sass map now accepts, for each of its values, a map of up to 4 values. For example: the key "info" now has the ($info, $info-invert, $info-light, $info-dark) map.

If you provide a $custom-colors map, you can decide to provide a map of 1, 2, 3 or 4 values for each value. If fewer than 4 are provided, Bulma will calculate the remaining ones:

$custom-colors: (
  'lime': (
    lime,
  ),
  'tomato': (
    tomato,
    white,
  ),
  'orange': (
    $orange,
    $orange-invert,
    $orange-light,
  ),
  'lavender': (
    $lavender,
    $lavender-invert,
    $lavender-light,
    $lavender-dark,
  ),
);

This is processed by the updated mergeColorMaps() Sass function.

Scheme variables

There are 6 new $scheme derived variables: $scheme-main $scheme-main-bis $scheme-main-ter $scheme-invert $scheme-invert-bis $scheme-invert-ter They replace the $white and $black occurrences in the codebase. This makes it easy to create a "Dark mode" simply by swapping the values:

$scheme-main: $black
$scheme-invert: $white
// etc.

That is also why most of the codebase now references derived variables ($text, $background, $border etc.) instead of initial ones ($grey, $grey-lighter, $grey-darker etc.): updating the derived variables will affect all elements and components directly.

Initial variables

• $green: hsl(141, 53%, 53%)
• $cyan: hsl(204, 71%, 53%)
• $red: hsl(348, 86%, 61%)

Derived variables

• $primary-invert: findColorInvert($primary)
• $primary-light: findLightColor($primary)
• $primary-dark: findDarkColor($primary)
• $info-invert: findColorInvert($info)
• $info-light: findLightColor($info)
• $info-dark: findDarkColor($info)
• $success-invert: findColorInvert($success)
• $success-light: findLightColor($success)
• $success-dark: findDarkColor($success)
• $warning-invert: findColorInvert($warning)
• $warning-light: findLightColor($warning)
• $warning-dark: findDarkColor($warning)
• $danger-invert: findColorInvert($danger)
• $danger-light: findLightColor($danger)
• $danger-dark: findDarkColor($danger)
• $light-invert: findColorInvert($light)

• $dark-invert: findColorInvert($dark)

• $scheme-main: $white

• $scheme-main-bis: $white-bis
• $scheme-main-ter: $white-ter
• $scheme-invert: $black
• $scheme-invert-bis: $black-bis
• $scheme-invert-ter: $black-ter

Other variables

• $control-height: 2.5em
• $control-padding-vertical: calc(0.5em - #{$control-border-width})
• $control-padding-horizontal: calc(0.75em - #{$control-border-width})
• $media-border-color: rgba($border, 0.5)
• $notification-code-background-color: $scheme-main
• $panel-radius: $radius-large
• $panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
• $textarea-padding: $control-padding-horizontal
• $textarea-max-height: 40em
• $textarea-min-height: 8em

Bug fixes

• Fix #2647 -> Missing meta tags in snippet
• Fix #2031, Fix #2483 -> Invalid output when declaring a custom shade map
• Fix #2060 -> height: auto on HTML audio element breaks height of element
• Fix #706 -> Derive -invert variables using findColorInvert()

• 1608 Fix #1552 -> .container.is-fluid margins

New features

• 2563 .image has a new .is-fullwidth modifier

0.7.5

Deprecation warning

The form.sass file is deprecated. It has moved into its own /form folder. If you were importing form.sass, please import sass/form/_all.sass now. If you were simply importing the whole of Bulma with @import "~/bulma/bulma.sass" or similar, you won't have to change anything, and everything will work as before.

New features

Support for overriding the font-family

You can now specify a different font-family for the .title, .subtitle and .button by using the variables $title-family, $subtitle-family and $button-family respectively.

Simply set a value when importing Bulma:

$title-family: 'Georgia', serif;

• 2375 Add .is-relative helper

• 2321 Make .navbar focus behave like hover for the navigation

• 2290 Fix #1186 -> Reset the offset on columns

• 2231 Add .has-text-weight-medium helper

• 2224 Add customizable border radius to progress bar

• 2480 Add $footer-color variable

Improvements

• 2396 Update docs with webpack 4 example

• 2381 Make centered buttons have equal margin

• Fix #2297 -> Remove .container fixed width values, use flex-grow

• 2478 Move form.sass into its own folder

Bug fixes

• 2420 Fix #2414 -> Fix align attribute in td/th being ignored

• 2463 Remove duplicate .has-addons in tag.sass

• 2253 Fix $gap variable default value

• 2273 Fix #2258 -> Fix Indeterminate Progress Bar animation in Firefox

• 2175 Proper aligning for .tabs within .content

• 2476 Fix #2441 -> Correct active pagination link text color on hero

Fix #1979 -> Correct loading spinner color when a button is:

• outlined and hovered/focused
• outlined, inverted and hovered/focused

New variables

Initial variables

• $block-spacing

Base

• $body-font-size
• $small-font-size
• $pre-font-size
• $pre-padding
• $pre-code-font-size

Components

• $card-header-padding
• $card-content-padding
• $card-media-margin
• $dropdown-menu-min-width
• $dropdown-content-padding-bottom
• $dropdown-content-padding-top
• $level-item-spacing
• $menu-list-line-height
• $menu-list-link-padding
• $menu-nested-list-margin
• $menu-nested-list-padding-left
• $menu-label-font-size
• $menu-label-letter-spacing
• $menu-label-spacing
• $pagination-item-font-size
• $pagination-item-margin
• $pagination-item-padding-left
• $pagination-item-padding-right
• $panel-margin
• $panel-tabs-font-size

Elements

• $container-offset

Grid

• $tile-spacing

0.7.3

New features

• 2145 Fix #372 -> New indeterminate progress bars

• 2206 Fix #2046 -> New variables $table-head-background-color, $table-body-background-color and $table-foot-background-color for the .table element

• 592 -> Give arbitrary elements access to the image/ratio classes

• 1682 Fix #1681 -> Adds disabled styles for <fieldset disabled>

• 2201 Fix #1875 -> .buttons and .tags group sizing (.are-small, .are-medium, .are-large)

Improvements

• 1978 Fix #1696 -> Force box-sizing: border-box on details element

• 2167 Fix #1878 -> New $footer-padding variable

• 2168 -> New $input-placeholder-color and $input-disabled-placeholder-color variables

Bug fixes

• 2157 Fix #1656 -> Allow border radius if only one .control in .field

• 2091 Fix #2091 -> Remove CSS rule which causes .tag.has-addons to not work correctly

• 2186 Fix #1130 -> Prevent .dropdown links underlining in .message component

• Fix #2154 -> Move .hero.is-fullheight-with-navbar to navbar.sass file

Deprecation

• .control.has-icon deprecated in favor of .control.has-icons

0.7.2

New features

• 1884 New $navbar-burger-color variable

• 1679 Add breakpoint based column gaps

• 1905 Fix modal for IE11 #1902

• 1919 New is-arrowless class for navbar items

• 1949 New is-fullheight-with-navbar class for heros

• 1764 New .is-sr-only helper

• 2109 Add and use $navbar-breakpoint variable

• New variables $control-height, $control-line-height, $pagination-min-width, $input-height

• 1720 Add list element feature

• 2123 Add .content ol types: .is-lower-roman, .is-upper-roman, .is-lower-alpha, .is-upper-alpha, and support for the type= HTML attribute

Improvements

• 1964 Allow .notification to have a .dropdown-item

• 1999 Change $border to $grey-lighter in mixins

• 2085 .media-content will allow scrolling horizontally if the content is too wide

• 1744 Fix #1710 by using $table-striped-row-even-hover-background-color only for even rows

• 2074 Allow <button> as .dropdown-item

Bug fixes

• 1749 Fix icons floating out of input area

• 1993 Fixes #1992 Prevent disabled form elements hover state from overlapping, if control has add-ons elements

• 1909 Fix Modal card in IE11

• 1908 Fix IE11 when textarea doesn't listen to size=""

• Fix #1991 The last button in list of full-width buttons has longer width

• 1982 Fix navbar-burger color when color modifier is used

• 1819 Fix #1137 error message for required file

• Fix #1904 and #1969: hide native file input in Chrome

• 2059 Remove unnecessary right margin from last level-item (level.is-mobile)

0.7.1

Improvements

• 1789 Add all shades to has-background-* helpers

Bug fixes

• 1796 #1806 Remove navbar box-shadow by default

0.7.0

New features

• New variables $widescreen-enabled and $fullhd-enabled: you can set them to false to disable each breakpoint
• New variables $control-border-width and $button-border-width
• 🎉 #1624 Add some common photography aspect ratios and portrait ratios
• 🎉 #1747 New $custom-colors and $custom-shades variable for adding your own colors and shades to Bulma's $colors and $shades maps respectively

Improvements

• 1619 Add $card-header-background-color, $card-content-background-color and $card-footer-background-color to allow different background customization for card elements

• 1669 Add .is-expanded modifier to .buttons.has-addons

• 1628 Add .has-background helpers for block background colors, like .has-text

• 1767 Added minified bundle with cleancss

Bug fixes

• 1778 Fix is-text-right precedence over is-text-left-mobile

• 1571 Fix position of delete button on .tag

• 1549 Implementing a simple version of the native sass percentage function

• 1707 Disable table hover in .content by default

• 1428 Fix media-content overflow

Variable changes

Updated default values

New variables

Removed variables

0.6.2

New features

• 🎉 Rounded buttons, inputs, pagination and toggle tabs

Improvements

• 1343 Add sub and sup title sizes

• 1452 New .is-italic helper

Bug fixes

• 935 Bug dropdown in hero (primary) menu items not visible

• 1456 Fix customize documentation

• 1190 Add $variable-columns to disable --columnGap

• 1518 Fix spacing of the delete button in notification element

• 1569 Fix missing use of $pagination-color variable

0.6.1

New features

• 🎉 List of buttons
• 🎉 #1235 Support for five column grid: .is-one-fifth, .is-two-fifths, .is-three-fifths, .is-four-fifths
• 🎉 #1287 New .is-invisible helper
• 🎉 #1255 New .is-expanded modifier for navbar-item
• 🎉 #1384 New .is-centered and .is-right modifiers for tags
• 🎉 #1383 New .is-empty modifier for file
• 🎉 #1380 Allow .is-selected class on <td> and <th> tags

Improvements

• 987 Improve tag > icon spacing

• Improve hamburger alignment

Bug fixes

• 1358 Fix indentation bug for .is-one-fifth

• 1356 SASS 3.5+ variable parsing compatibility allows only #{}

• 1342 Remove black line from progress bar in IE

• 1334 Fix progress bar colors in IE

• 1313 Fix Table is-selected and is-hoverable styling issue

• 963 Fix Delete Button Bug in iOS Safari

0.6.0

Breaking changes

• The new $link color is part of the $colors map. As a result, .button.is-link is a colored button now. Use .button.is-text if you want the underlined button.
• The deprecated variables.sass file has been removed.
• The deprecated nav.sass file has been removed.

New features

• 1236 .table hover effect is opt-in, by using the .is-hoverable modifier class

• 1254 .dropdown now supports .is-up modifier

Improvements

• 1257 Include placeholder mixin in =input

The $link color is used instead of $primary in the following components:

Issues closed

• 708 Import variables in mixins

0.5.3

New features

• 1101 .card-header-title can be centered with .is-centered

• 1189 .input readonly and .is-static

• 1189 .textarea readonly

Issues closed

• 1177 Fix .message .tag combination

• 1167 Fix pre code

• 1207 Fix .breadcrumb alignment

0.5.2

New features

• 842 navbar color modifiers

• 331 Support for third party icons

• Added $button-focus-box-shadow-size and $button-focus-box-shadow-color for customization
• Added $input-focus-box-shadow-size and $input-focus-box-shadow-color for customization
• Navbar tabs

Issues closed

• 1168 Undefined variable: $navbar-item

• 930 Remove vertical-align: top for icons

• 735 Font awesome custom font-size

• 395 Font awesome stacked icons

• 1152 Level-items not centered horizontally on mobile

• 1147 Add text-size-adjust: 100% to html

• 1106 pagination docs

• 1063 $family-primary customization

0.5.1

New features

• 🎉 #280 File upload element
• $container-offset variable to determine the .container breakpoints

• 1001 Text case helpers

Issues closed

• 1030 Add !important to non responsive display helpers

• 1020 Customizing .navbar-item img max height

• 998 .navbar-dropdown with right alignment

• 877 .pagination isn't using $pagination-background

• 989 navbar-brand overflowing on mobile

• 975 Variable $table-head-color isn't used

• 964 Tabs sass file throwing error with !important

• 949 .is-size-7 helper is missing

0.5.0

New features

• 🎉 List of tags
• New variable naming system: component-subcomponent-state-property
• Improved customization thanks to new set of variables

• 934 New .is-shadowless helper

Variable name changes (mostly appending -color):

Improved documentation

• Starter template
• Colors page
• Typography helpers
• Meta information for all elements and components
• Variables information for most elements and components

Issues closed

• 909 .dropdown wrapping

• 938 .is-fullwidth removed from docs

• 900 Variable .navbar-item for hover+active background/color

• 902 .navbar-item color overrides

0.4.4

New features

• New dropdown button!
• The breakpoints and .container gap can be customized with the new $gap variable
• The .container has 2 new modifiers: .is-widescreen and .is-fullhd

Issues closed

• Fix #26 .textarea element will honors [rows] attribute
• Fix #887 body scrollbar
• Fix #715 .help class behavior in horizontal form is-grouped field
• Fix #842 Adding modifiers in navbar
• Fix #841 .container as direct child of .navbar moves .navbar-menu below .navbar-brand
• Fix #861 Box in hero as text and background white
• Fix #852 charset and version number
• Fix #856 JavaScript .nav-burger example
• Fix #821 Notification strong color

0.4.3

New features

• New navbar with dropdown support
• Add new feature: Breadcrumb component (#632) @vinialbano
• Add Bloomer to README.md (#787) @AlgusDark
• Add responsive is-*-touch tags for .column sizes (#780) @tom-rb
• Adding 'is-hidden' to helpers in docs (#798) @aheuermann
• Add figure/figcaption as content element (#807) @werthen
• Add ^{and _{support to content (#808) @werthen}}
• Add re-bulma and react-bulma (#809) @kulakowka
• Add is-halfheight to hero (#783) @felipeas
• Added a related project with Golang backend (#784) @Caiyeon

Issues closed

• Fix #827 Breadcrumb and Navbar in docs
• Fix #824 Code examples broken because of text-align: center
• Fix #820 Loading spinner resizes with controls
• Fix #819 Remove height: auto from media elements
• Fix #790 Documentation typo
• Fix #814 Make use of +fullhd mixin for columns @Saboteur777
• Fix #781 Add min/max height/width to delete class size modifiers @ZackWard
• Fix #391 Section docs update

0.4.2

• Fix #728 selected row on striped table
• Fix #747 remove flex-shrink for is-expanded
• Fix #702 add icons support for select dropdown
• Fix #712 delete button as flexbox item
• Fix #759 static button

0.4.1

• Fix #568 max-width container
• Fix #589 notification delete
• Fix #272 nav-right without nav-menu
• Fix #616 hero and notification buttons
• Fix #607 has-addons z-index
• Feature #586 select color modifiers
• Fix #537 -ms-expand
• Fix #578 better +center mixin
• Fix #565 dl styles
• Fix #389 pre margin-bottom
• Fix #484 icon alignment
• Fix #506 bold nav menu
• Fix #581 nav container
• Fix #512 nav grouped buttons
• Fix #605 container example
• Fix #458 select expanded
• Fix #403 separate animations
• Fix #637 customize Bulma
• Fix #584 loading select
• Fix #571 control height
• Fix #634 is-grouped control
• Fix #676 checkbox/radio wrapping
• Feature #479 has-icons placement
• Fix #442 selected table row
• Fix #187 add customize page
• Fix #449 columns negative horizontal margin
• Fix #399 pagination wrapping
• Fix #227 color keys as strings

0.4.0

• Default font-size is 16px
• New .field element ; .control repurposed
• New .pagination sizes

• New $fullhd breakpoint (1344px)

• Remove monospace named fonts

• Remove icon spacing logic
• Split icon container dimensions and icon size
• Fix delete button by using pixels instead of (r)em
• Fix level on mobile

• Add new .is-spaced modifier for titles and subtitles

• Fix #487

• Fix #489
• Fix #502
• Fix #514
• Fix #524
• Fix #536

0.3.2

• Fix #478

0.3.1

• Fix #441
• Fix #443

0.3.0

• Use rem and em (!)
• Fix Font Awesome icons in buttons (!)
• Fix message colors (!)

• Use {% capture %} to ensure same display as code snippet (!)

• Move variables to their own file

• Remove small tag
• Add :focus state
• Fix table
• Remove table .is-icon and .is-link
• Add .content table
• Fix inputs with icons
• Input icons require the .icon container
• Deprecate .media-number
• Fix .level-item height
• Fix .menu spacing
• Deprecate .menu-nav
• Add invert outlined buttons
• Fix .nav
• Fix .pagination
• Fix .tabs
• Fix .panel
• Fix .delete
• Add mixins documentation
• Add functions documentation

0.2.2

• Fix: remove multiple imports

0.2.1

• Fix: container flex
• Fix: nav-item flex
• Fix: media-number flex
• Fix: new brand colors

0.2.0

• Added: new branding
• Added: modularity
• Added: grid folder
• Added: .github folder

0.1.1

• Remove flex: 1 shorthand

0.1.0

• Fix #227
• Fix #232
• Fix #242
• Fix #243
• Fix #228
• Fix #245
• Fix #246

0.0.28

• BREAKING: .control.is-grouped now uses .control elements as direct children
• Fix #220
• Fix #214
• Fix #210
• Fix #206
• Fix #122

0.0.27

• Fix: #217
• Fix: #213
• Fix: #209
• Fix: #205
• Fix: #204
• Fix: #81

0.0.26

• Added: .modal-card
• Added: display responsive utilities
• Added: .nav-center
• Added: .tabs ul left center right
• Changed: .navbar renamed to .level
• Changed: .header renamed to .nav
• Deprecated: .header
• Deprecated: .navbar
• Fixed: .hero layout

0.0.25

• Added: utilities/controls.sass and elements/form.sass
• Added: new responsive classes
• Added: white/black and light/dark colors
• Changed: .tabs need .icon now
• Changed: cdnjs link doesn't include version

0.0.24

Added

• is-mobile for the navbar

Removed

• removed border between sections. Use <hr class="is-marginless"> now

Updated

• restructured files
• added back inline-flex for controls and tags

Removed

• test tiles

0.0.23

BREAKING

• bulma folder renamed to sass to avoid the redundant bulma/bulma path
• variables.sass moved to /utilities
• almost everything is singular now
• elements only have one class
• components have at least one sub-class
• .content moved to elements
• .table moved to elements
• .message moved to components
• .table-icon, .table-link, .table-narrow are now called .is-icon, .is-link, .is-narrow

Added

• all variables are now !default so you can set your custom variables before importing Bulma

0.0.22

Fixed

• links in hero subtitle

0.0.21

Added

• .column.is-narrow to make a column flex: none

0.0.20

Added

• .has-icon support for different .input sizes

0.0.19

NEW!!!

• .tile

BREAKING

• .is-third renamed to .is-one-third
• .is-quarter renamed to .is-one-quarter

Added

• .is-two-thirds
• .is-three-quarters

Changed

• .delete in .tag has no red

0.0.18

BREAKING

• .is-text-* renamed to .has-text-*
• removed .is-fullwidth helper

Added

• small tag: .tag.is-small
• 12th column classes
• *-full column classes
• $family-code

Fixed

• disabled input with element
• .table last row with th
• .card color in .hero
• .columns.is-gapless

Removed

• removed box-shadow from .tag
• custom checkboxes and radio buttons

Updated

• .tag uses display: inline-flex now

0.0.17

Added

• pagination: .pagination
• horizontal forms: .control.is-horizontal
• help text for form controls: .help
• progress bars: .progress

Updated

• .button uses display: inline-flex now
• .button needs an .icon now
• .control.is-grouped renamed to .control.has-addons
• .control.is-inline renamed to .control.is-grouped

Removed

• helpers .is-inline and .is-block