Bulma Modifiers

Bulma Modifiers– Bulma Css provides modifier classes which can be used to add the alternative styles. Using Modifier classes you can easily modify the default styles. Modifier classes starts with is- or has-. Here in this article, we are going to explain how we can use modifier classes in Bulma.

Bulma Modifiers | Helpers | Css Classes Syntax & Example

Let us understand how modifier classes works step by step.

Topics

1. Syntax
2. Helpers
3. Responsive Helpers
4. Typography Helpers

Syntax

Modifier classes starts with is- or has- for example- is-primary, is-link. Suppose we want to change the default button style we can use these modifier classes. Now let us go through some important modifier classes.

Change Button Color

There are following classes that can be used to change the button color in Bulma.

1. is-primary
2. is-link
3. is-info
4. is-success
5. is-warning
6. is-danger

Using the above modifier classes you can create the following buttons-

  Button Primary


  Button Link


  Button Info


  Button Success


  Button Warning


  Button Danger

If you run the above example it will produce output something like this-

Change Button Size

You can create small, medium or large buttons in Bulma. You can use the following classes to change size-

1. is-small
2. is-medium
3. is-large

 Button Small


Button 


Button Medium


Button Large
   

If you run the above example it will produce output something like this-

Change Button Style/State

You can create outlined, loading, disabled buttons using the following class-

1. is-outlined
2. is-loading
3. is-disabled

Button


Button


Button

Output of the above example will be-

Helpers

Following responsive classes are available which can be used easily anywhere-

1. is-clearfix– Fixes an element’s floating children
2. is-pulled-left– Moves an element to the left
3. is-pulled-right– Moves an element to the right
4. is-marginless– Removes any margin
5. is-paddingless– Removes any padding
6. is-overlay– Completely covers the first positioned parent
7. is-clipped– Adds overflow hidden
8. is-radiusless– Removes any radius
9. is-shadowless– Removes any shadow
10. is-unselectable– Prevents the text from being selectable
11. is-invisible-Adds visibility hidden

Responsive Helpers

You can use the responsive helper to show/hide the content based on viewport of device.

Show

You can use following display classes-

1. block
2. flex
3. inline
4. inline-block
5. inline-flex

Hide Classes

You can use following classes to hide on specific devices-

1. is-hidden-mobile– Hidden on Mobile devices.
2. is-hidden-tablet-only– Hidden only on Tablet.
3. is-hidden-desktop-only-Hidden only on desktop.
4. is-hidden-widescreen-only– Hidden on wide screen between 1216px and 1407px.

Typography Helpers