Bulma-Gomponents provides predefined modifier variables for all colors available in Bulma. These modifiers names (corresponding to Bulma classes) are formatted as:
b.[Target][Color][Variant][Invert]
, where:
Target ... | means... |
---|
Text | Set text color |
Background | Set background color |
No target | Set component color - it should work on b.Button* , b.Icon , b.IconText , fa.FA , fa.Icon , fa.Li , b.Notification , b.Progress , b.ProgressIndeterminate , b.TCell , b.Tag , b.Message , b.Navbar , b.Panel , b.Help , b.Input* , b.Textarea , b.Select , b.File and b.Hero . Its use on icons and icon-related elements is specific to Bulma-Gomponents which transforms the color to the text-color equivalent for you. |
Color ... | means... |
---|
White , Black , Dark , Light , Text , Link , Primary , Info , Success , Warning , Danger , BlackBis , BlackTer , GreyDarker , GreyDark , Grey , GreyLight , GreyLighter , WhiteTer or WhiteBis . | Set the base color |
Variant ... | means... |
---|
No variant | The base color |
00 , 05 , 10 , 15 , 20 , 25 , 30 , 35 , 40 , 45 , 50 , 55 , 60 , 65 , 70 , 75 , 80 , 85 , 90 , 95 or 100 | The corresponding shade |
Light , Dark , Soft , Bold or OnScheme | The corresponding variant |
Invert ... | means... |
---|
No invert | The base color |
Invert | Invert the color |
Examples:
Example | Color |
---|
b.Primary | Primary color for a component or element which supports colors |
b.TextSuccess60 | Success color with 60% opacity on the text |
b.BackgroundDangerLight | Danger color in its light variant on the background |
b.BackgroundInfo, b.TextInfoInvert | Info color on the background and a decent-looking color for the text |
You can also inherit the color, or use the current one:
Class | Value |
---|
b.TextCurrent | currentColor |
b.TextInherit | inherit |
b.BackgroundCurrent | currentColor |
b.BackgroundInherit | inherit |
11 main colors
Bulma provides 4 base white/black colors and 7 primary colors, with "inverted" equivalents (which will look decent on the primary color):
Color | Sample |
---|
White | |
Black | |
Light | |
Dark | |
Text | |
Link | |
Primary | |
Info | |
Success | |
Warning | |
Danger | |
The 7 primary colors also have the following variants, which you can check in the color palette below:
Light | The primary color at 90% lightness |
Dark | The primary color at 20% lightness |
Soft | Light in light mode, dark in dark mode |
Bold | Dark in light mode, light in dark mode |