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-familyYou 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-growalign attribute in td/th being ignored.has-addons in tag.sass$gap variable default value.tabs within .contentFix #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-itemsize=""has-background-* helpersbox-shadow by default$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-textis-text-right precedence over is-text-left-mobile.tag.content by defaultmedia-content overflowsub and sup title sizes.is-italic helperhero (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=inputThe $link color is used instead of $primary in the following components:
.card-header-title can be centered with .is-centered.input readonly and .is-static.textarea readonly.message .tag combinationpre code.breadcrumb alignmentnavbar 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-itemvertical-align: top for iconsfont-sizetext-size-adjust: 100% to htmlpagination 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-backgroundnavbar-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):
.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: centerheight: auto from media elements+center mixindl stylespre margin-bottomDefault 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
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
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-gaplessbox-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