Bulma Changelog¶ ↑
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 singleextends
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
togeneric.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 officialy 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: 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 direciton suffix. For example:
- for a
margin-top
, usemt-*
- for a
padding-bottom
, usepb-*
- for both
margin-left
andmargin-right
, usemx-*
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¶ ↑
Bug fixes¶ ↑
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 supportinherit
value -
2756 Add
$button-text-decoration
variable¶ ↑
Bug fixes¶ ↑
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 -
findDarkolor()
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
occurences 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 HTMLaudio
element breaks height of element -
Fix #706 -> Derive
-invert
variables usingfindColorInvert()
-
1608 Fix #1552 ->
.container.is-fluid
margins¶ ↑
New features¶ ↑
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, useflex-grow
-
2478 Move form.sass into its own folder¶ ↑
Bug fixes¶ ↑
-
2420 Fix #2414 -> Fix
align
attribute intd/th
being ignored¶ ↑ -
2463 Remove duplicate
.has-addons
intag.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 colour 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
ondetails
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
tonavbar.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 thetype=
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¶ ↑
Bug fixes¶ ↑
0.7.0¶ ↑
New features¶ ↑
-
New variables
$widescreen-enabled
and$fullhd-enabled
: you can set them tofalse
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 overis-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¶ ↑
File
sass/utilities/initial-variables.sass
|
||
---|---|---|
Variable | From | To |
$gap
|
32px
|
64px
|
$radius
|
3px
|
4px
|
$radius-large
|
5px
|
6px
|
File
sass/base/generic.sass
|
||
---|---|---|
Variable | From | To |
$hr-background-color
|
$border
|
$background
|
$hr-height
|
1px
|
2px
|
File
sass/elements/content.sass
|
||
---|---|---|
Variable | From | To |
$content-heading-weight
|
$weight-normal
|
$weight-semibold
|
File
sass/components/message.sass
|
||
---|---|---|
Variable | From | To |
$message-header-padding
|
0.5em 0.75em
|
0.75em 1em
|
$message-body-padding
|
1em 1.25em
|
1.25em 1.5em
|
File
sass/components/navbar.sass
|
||
---|---|---|
Variable | From | To |
$navbar-item-hover-background-color
|
$background
|
$white-bis
|
$navbar-dropdown-border-top
|
1px solid $border
|
2px solid $border
|
$navbar-divider-background-color
|
$border
|
$background
|
File
sass/layout/footer.sass
|
||
---|---|---|
Variable | From | To |
$footer-background-color
|
$background
|
$white-bis
|
New variables¶ ↑
File
sass/components/breadcrumb.sass
|
|
---|---|
Name | Value |
$breadcrumb-item-padding-vertical
|
0
|
$breadcrumb-item-padding-horizontal
|
0.75em
|
File
sass/components/message.sass
|
|
---|---|
Name | Value |
$message-body-border-color
|
$border
|
$message-body-border-width
|
0 0 0 4px
|
$message-header-weight
|
$weight-bold
|
$message-header-body-border-width
|
0
|
File
sass/components/navbar.sass
|
|
---|---|
Name | Value |
$navbar-box-shadow-size
|
0 2px 0 0
|
$navbar-box-shadow-color
|
$background
|
$navbar-padding-vertical
|
1rem
|
$navbar-padding-horizontal
|
2rem
|
$navbar-z
|
30
|
File
sass/elements/title.sass
|
|
---|---|
Name | Value |
$title-line-height
|
1.125
|
$subtitle-line-height
|
1.25
|
$subtitle-negative-margin
|
-1.25rem
|
Removed variables¶ ↑
File | Removed | Replaced with |
---|---|---|
sass/components/message.sass
|
$message-body-border
|
$message-body-border-color
$message-body-border-width
|
0.6.2¶ ↑
New features¶ ↑
-
๐ Rounded buttons, inputs, pagination and toggle tabs
Improvements¶ ↑
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 fornavbar-item
-
๐ #1384 New
.is-centered
and.is-right
modifiers fortags
-
๐ #1383 New
.is-empty
modifier forfile
-
๐ #1380 Allow
.is-selected
class on<td>
and<th>
tags
Improvements¶ ↑
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
andis-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¶ ↑
The $link
color is used instead of $primary
in the following components:
Variable | Old value | New value |
---|---|---|
$dropdown-item-active-color |
$primary-invert |
$link-invert |
$dropdown-item-active-background-color |
$primary |
$link |
$navbar-tab-hover-border-bottom-color |
$primary |
$link |
$navbar-tab-active-color |
$primary |
$link |
$navbar-tab-active-border-bottom-color |
$primary |
$link |
$navbar-dropdown-item-active-color |
$primary |
$link |
$tabs-link-active-border-bottom-color |
$primary |
$link |
$tabs-link-active-color |
$primary |
$link |
$tabs-toggle-link-active-background-color |
$primary |
$link |
$tabs-toggle-link-active-border-color |
$primary |
$link |
$tabs-toggle-link-active-color |
$primary-invert |
$link-invert |
Issues closed¶ ↑
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¶ ↑
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%
tohtml
¶ ↑ -
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
):
From | To |
---|---|
$card | $card-color |
$card-background | $card-background-color |
$card-header | $card-header-color |
$dropdown-item | $dropdown-item-color |
$dropdown-content-background | $dropdown-content-background-color |
$dropdown-item-hover-background | $dropdown-item-hover-background-color |
$dropdown-item-hover | $dropdown-item-hover-color |
$dropdown-item-active-background | $dropdown-item-active-background-color |
$dropdown-item-active | $dropdown-item-active-color |
$dropdown-divider-background | $dropdown-divider-background-color |
$menu-item | $menu-item-color |
$menu-item-hover | $menu-item-hover-color |
$menu-item-hover-background | $menu-item-hover-background-color |
$menu-item-active | $menu-item-active-color |
$menu-item-active-background | $menu-item-active-background-color |
$menu-label | $menu-label-color |
$message-background | $message-background-color |
$message-header-background | $message-header-background-color |
$navbar-background | $navbar-background-color |
$navbar-item | $navbar-item-color |
$navbar-item-hover | $navbar-item-hover-color |
$navbar-item-hover-background | $navbar-item-hover-background-color |
$navbar-item-active | $navbar-item-active-color |
$navbar-item-active-background | $navbar-item-active-background-color |
$navbar-tab-hover-background | $navbar-tab-hover-background-color |
$navbar-tab-hover-border-bottom | $navbar-tab-hover-border-bottom-color |
$navbar-tab-active | $navbar-tab-active-color |
$navbar-tab-active-background | $navbar-tab-active-background-color |
$navbar-divider-background | $navbar-divider-background-color |
$navbar-dropdown-item-hover | $navbar-dropdown-item-hover-color |
$navbar-dropdown-item-hover-background | $navbar-dropdown-item-hover-background-color |
$navbar-dropdown-item-active | $navbar-dropdown-item-active-color |
$navbar-dropdown-item-active-background | $navbar-dropdown-item-active-background-color |
$pagination | $pagination-color |
$pagination-hover | $pagination-hover-color |
$pagination-hover-border | $pagination-hover-border-color |
$pagination-focus | $pagination-focus-color |
$pagination-focus-border | $pagination-focus-border-color |
$pagination-active | $pagination-active-color |
$pagination-active-border | $pagination-active-border-color |
$pagination-disabled | $pagination-disabled-color |
$pagination-disabled-background | $pagination-disabled-background-color |
$pagination-disabled-border | $pagination-disabled-border-color |
$pagination-current | $pagination-current-color |
$pagination-current-background | $pagination-current-background-color |
$pagination-current-border | $pagination-current-border-color |
$pagination-ellipsis | $pagination-ellipsis-color |
$box | $box-color |
$box-background | $box-background-color |
$button | $button-color |
$button-background | $button-background-color |
$button-border | $button-border-color |
$button-link | $button-link-color |
$button-link-hover-background | $button-link-hover-background-color |
$button-link-hover | $button-link-hover-color |
$button-disabled-background | $button-disabled-background-color |
$button-disabled-border | $button-disabled-border-color |
$button-static | $button-static-color |
$button-static-background | $button-static-background-color |
$button-static-border | $button-static-border-color |
$input | $input-color |
$input-background | $input-background-color |
$input-border | $input-border-color |
$input-hover | $input-hover-color |
$input-hover-border | $input-hover-border-color |
$input-focus | $input-focus-color |
$input-focus-border | $input-focus-border-color |
$input-disabled | $input-disabled-color |
$input-disabled-background | $input-disabled-background-color |
$input-disabled-border | $input-disabled-border-color |
$input-icon | $input-icon-color |
$input-icon-active | $input-icon-active-color |
$title | $title-color |
$subtitle | $subtitle-color |
$card-footer-border | $card-footer-border-top |
$menu-list-border | $menu-list-border-left |
$navbar-tab-hover-border | $navbar-tab-hover-border-bottom-color |
$navbar-tab-active-border | $navbar-tab-active-border-bottom |
$table-border | $table-cell-border |
$table-row-even-background | $table-striped-row-even-background-color |
$table-row-even-hover-background | $table-striped-row-even-hover-background-color |
Improved documentation¶ ↑
-
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 behaviour in horizontal formis-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 <sup> and <sub> 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 ยฎ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
andem
(!) -
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
andelements/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 tosass
to avoid the redundantbulma/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 columnflex: 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 withth
-
.card
color in.hero
-
.columns.is-gapless
Removed¶ ↑
-
removed
box-shadow
from.tag
-
custom checkboxes and radio buttons
Updated¶ ↑
-
.tag
usesdisplay: 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
usesdisplay: 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