November 2, 2017

Bulma Modifiers

❮❮ Previous
Next ❯❯

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-

Bulma Add Button Color Example:

<a class="button is-primary">
  Button Primary
</a>
<a class="button is-link">
  Button Link
</a>
<a class="button is-info">
  Button Info
</a>
<a class="button is-success">
  Button Success
</a>
<a class="button is-warning">
  Button Warning
</a>
<a class="button is-danger">
  Button Danger
</a>

Try it »

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

Bulma Modifiers

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

Bulma Change Button Size Example:

<a class="button is-primary is-small">
 Button Small
</a>
<a class="button is-primary">
Button 
</a>
<a class="button is-primary is-medium">
Button Medium
</a>
<a class="button is-primary is-large">
Button Large
</a>

Try it »

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

Button Modifiers - Change Button Size Example

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 Style & State Example:

<a class="button is-danger is-outlined">
Button
</a>
<a class="button is-danger is-loading">
Button
</a>
<a class="button is-danger is-disabled" disabled>
Button
</a>

Try it »

Output of the above example will be-

Bulma Loading Button

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


Advertisements

Add Comment

📖 Read More


❮❮ Previous
Next ❯❯