- Fix #2031, Fix #2483 -> Invalid output when declaring a custom shade map
- Fix #2060 ->
height: auto
on HTMLaudio
element breaks height of element - #1608 Fix #1552 ->
.container.is-fluid
margins
- #2563
.image
has a new.is-fullwidth
modifier
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.
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
- #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
- #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
$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
- #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
)
- #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
- #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
.control.has-icon
deprecated in favor of.control.has-icons
- #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
- #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
- #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)
- #1789 Add all shades to
has-background-*
helpers
- #1796 #1806 Remove navbar
box-shadow
by default
- 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
- #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
- #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
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
|
- 🎉 Rounded buttons, inputs, pagination and toggle tabs
- #1343 Add
sub
andsup
title sizes - #1452 New
.is-italic
helper
- #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
- 🎉 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
- #987 Improve
tag > icon
spacing - Improve
hamburger
alignment
- #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
- 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.
- #1236
.table
hover effect is opt-in, by using the.is-hoverable
modifier class - #1254
.dropdown
now supports.is-up
modifier
- #1257 Include placeholder mixin in
=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 |
- #708 Import variables in mixins
- #1101
.card-header-title
can be centered with.is-centered
- #1189
.input
readonly and.is-static
- #1189
.textarea
readonly
- #1177 Fix
.message .tag
combination - #1167 Fix
pre code
- #1207 Fix
.breadcrumb
alignment
- #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
- #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
- 🎉 #280 File upload element
$container-offset
variable to determine the.container
breakpoints- #1001 Text case helpers
- #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
- 🎉 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 |
- Starter template
- Colors page
- Typography helpers
- Meta information for all elements and components
- Variables information for most elements and components
- #909
.dropdown
wrapping - #938
.is-fullwidth
removed from docs - #900 Variable
.navbar-item
for hover+active background/color - #902
.navbar-item
color overrides
- 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
- 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
- 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
- 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
- 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
- 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
-
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
- Fix #478
- Fix #441
- Fix #443
-
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
- Fix: remove multiple imports
- Fix: container flex
- Fix: nav-item flex
- Fix: media-number flex
- Fix: new brand colors
- Added: new branding
- Added: modularity
- Added: grid folder
- Added: .github folder
- Remove
flex: 1
shorthand
- Fix #227
- Fix #232
- Fix #242
- Fix #243
- Fix #228
- Fix #245
- Fix #246
- BREAKING:
.control.is-grouped
now uses.control
elements as direct children - Fix #220
- Fix #214
- Fix #210
- Fix #206
- Fix #122
- Fix: #217
- Fix: #213
- Fix: #209
- Fix: #205
- Fix: #204
- Fix: #81
- 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
- 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
is-mobile
for the navbar
- removed border between sections. Use
<hr class="is-marginless">
now
- restructured files
- added back
inline-flex
for controls and tags
- test tiles
bulma
folder renamed tosass
to avoid the redundantbulma/bulma
pathvariables.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
- all variables are now
!default
so you can set your custom variables before importing Bulma
- links in hero subtitle
.column.is-narrow
to make a columnflex: 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-*
- removed
.is-fullwidth
helper
- small tag:
.tag.is-small
- 12th column classes
*-full
column classes$family-code
- disabled input with element
.table
last row withth
.card
color in.hero
.columns.is-gapless
- removed
box-shadow
from.tag
- custom checkboxes and radio buttons
.tag
usesdisplay: inline-flex
now
- pagination:
.pagination
- horizontal forms:
.control.is-horizontal
- help text for form controls:
.help
- progress bars:
.progress
.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
- helpers
.is-inline
and.is-block