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 bbefore.
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;
.is-relative
helper.navbar
focus behave like hover for the navigation.has-text-weight-medium
helper$footer-color
variable.container
fixed width values, use flex-grow
align
attribute in td/th
being ignored.has-addons
in tag.sass
$gap
variable default value.tabs
within .content
Fix #1979 -> Correct loading spinner color when a button is:
$block-spacing
$body-font-size
$small-font-size
$pre-font-size
$pre-padding
$pre-code-font-size
$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
$container-offset
$tile-spacing
$table-head-background-color
, $table-body-background-color
and $table-foot-background-color
for the .table
element<fieldset disabled>
.buttons
and .tags
group sizing (.are-small
, .are-medium
, .are-large
)box-sizing: border-box
on details
element$footer-padding
variable$input-placeholder-color
and $input-disabled-placeholder-color
variables.control
in .field
.tag.has-addons
to not work correctly.dropdown
links underlining in .message
component.hero.is-fullheight-with-navbar
to navbar.sass
file.control.has-icon
deprecated in favor of .control.has-icons
$navbar-burger-color
variablemodal
for IE11 #1902is-arrowless
class for navbar itemsis-fullheight-with-navbar
class for heros.is-sr-only
helper$navbar-breakpoint
variable$control-height
, $control-line-height
, $pagination-min-width
, $input-height
.content ol
types: .is-lower-roman
, .is-upper-roman
, .is-lower-alpha
, .is-upper-alpha
, and support for the type=
HTML attribute.notification
to have a .dropdown-item
$border
to $grey-lighter
in mixins.media-content
will allow scrolling horizontally if the content is too wide$table-striped-row-even-hover-background-color
only for even rows<button>
as .dropdown-item
size=""
has-background-*
helpers$widescreen-enabled
and $fullhd-enabled
: you can set them to false
to disable each breakpoint$control-border-width
and $button-border-width
$custom-colors
and $custom-shades
variable for adding your own colors and shades to Bulma’s $colors
and $shades
maps respectively$card-header-background-color
, $card-content-background-color
and $card-footer-background-color
to allow different background customization for card elements.is-expanded
modifier to .buttons.has-addons
.has-background
helpers for block background colors, like .has-text
is-text-right
precedence over is-text-left-mobile
.tag
.content
by defaultmedia-content
overflow
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
|
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
|
File | Removed | Replaced with |
---|---|---|
sass/components/message.sass
|
$message-body-border
|
$message-body-border-color
$message-body-border-width
|
hero
(primary) menu items not visible$variable-columns
to disable --columnGap
$pagination-color
variable.is-one-fifth, .is-two-fifths, .is-three-fifths, .is-four-fifths
.is-invisible
helper.is-expanded
modifier for navbar-item
.is-centered
and .is-right
modifiers for tags
.is-empty
modifier for file
.is-selected
class on <td>
and <th>
tagstag > icon
spacinghamburger
alignmentis-selected
and is-hoverable
styling issue$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.variables.sass
file has been removed.nav.sass
file has been removed..table
hover effect is opt-in, by using the .is-hoverable
modifier class.dropdown
now supports .is-up
modifier=input
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 |
.card-header-title
can be centered with .is-centered
.input
readonly and .is-static
.textarea
readonlynavbar
color modifiers$button-focus-box-shadow-size
and $button-focus-box-shadow-color
for customization$input-focus-box-shadow-size
and $input-focus-box-shadow-color
for customization$navbar-item
vertical-align: top
for iconsfont-size
text-size-adjust: 100%
to html
pagination
docs$family-primary
customization$container-offset
variable to determine the .container
breakpoints!important
to non responsive display helpers.navbar-item img
max height.navbar-dropdown
with right alignment.pagination
isn’t using $pagination-background
navbar-brand
overflowing on mobile$table-head-color
isn’t used!important
.is-size-7
helper is missingcomponent
-subcomponent
-state
-property
.is-shadowless
helperVariable 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 |
.dropdown
wrapping.is-fullwidth
removed from docs.navbar-item
for hover+active background/color.navbar-item
color overrides.container
gap can be customized with the new $gap
variable.container
has 2 new modifiers: .is-widescreen
and .is-fullhd
.textarea
element will honors [rows]
attributebody
scrollbar.help
class behaviour in horizontal form is-grouped
fieldnavbar
.container
as direct child of .navbar
moves .navbar-menu
below .navbar-brand
.nav-burger
exampletext-align: center
height: auto
from media elements+center
mixindl
stylespre
margin-bottom
.field
element ; .control
repurposed.pagination
sizesNew $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
rem
and em
(!)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
flex: 1
shorthand.control.is-grouped
now uses .control
elements as direct children.modal-card
.nav-center
.tabs ul
left center right.navbar
renamed to .level
.header
renamed to .nav
.header
.navbar
.hero
layoututilities/controls.sass
and elements/form.sass
.tabs
need .icon
nowis-mobile
for the navbar<hr class="is-marginless">
nowinline-flex
for controls and tagsbulma
folder renamed to sass
to avoid the redundant bulma/bulma
pathvariables.sass
moved to /utilities
.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
!default
so you can set your custom variables before importing Bulma.column.is-narrow
to make a column flex: none
.has-icon
support for different .input
sizes.tile
.is-third
renamed to .is-one-third
.is-quarter
renamed to .is-one-quarter
.is-two-thirds
.is-three-quarters
.delete
in .tag
has no red.is-text-*
renamed to .has-text-*
.is-fullwidth
helper.tag.is-small
*-full
column classes$family-code
.table
last row with th
.card
color in .hero
.columns.is-gapless
box-shadow
from .tag
.tag
uses display: inline-flex
now.pagination
.control.is-horizontal
.help
.progress
.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
.is-inline
and .is-block