Bulma Modifiers

Bulma modifiers are basically started with either is- or has-. It is used to provide alternative styles to HTML elements.

Bulma provides following modifiers that is useful for :

1.0 Button Colors
2.0 Text Colors
3.0 Responsive Layout

Button Styles

Bulma CSS provides different styles of buttons:

To create button with different style use the followings predefined button helper classes: is-primary, is-link, is-info, is-success, is-warning, is-danger.

General Syntax

      
        <element class="button is-{primary | secondary | is-link | is-info | is-success | is-warning | is-danger } ">Button</element>

Try it now

Source Code

          
            <div class="container">

<div class="columns is-mobile">
	<div class="column">
		<button class="button is-primary">Primary</button>
	</div>
	<div class="column">
		<button class="button is-link">Link</button>
	</div>
	<div class="column">
		<button class="button is-info">Info</button>
	</div>
</div>
<div class="columns is-mobile">
	<div class="column">
		<button class="button is-success">Success</button>
	</div>
	<div class="column">
		<button class="button is-warning">Warning</button>
	</div>
	<div class="column">
		<button class="button is-danger">Danger</button>
	</div>
</div>
</div>

Try it now

Source Code : Output

Button Size

There are the following types of button sizes such as small buttons, medium buttons, and large buttons.

Bulma Button: Size

Follow the following steps to create different size buttons:

Steps 1: Assign .button class as well as .is-* class to the button element base class.
Steps 2: Here * denotes {small | medium | large }

General Syntax

      
        <element class="button is-{small | medium | large}">Button Size</element>

Try it now

Source Code

          
            <div class="columns is-multiline has-text-centered mt-5 is-mobile">
      <div class="column is-4">
          <button type="button" class="button is-primary is-small">Primary</button>
      </div>

      <div class="column is-4">
          <button type="button" class="button is-link is-medium">Link</button>
      </div>

      <div class="column is-4">
         <button type="button" class="button is-info is-large">Info</button>
      </div>

  </div>

Try it now

Source Code : Output

Button: States

There are mainly following types of the button states such as :is-outlined , is-loading , [disabled]

To create different states of button, you have to follow the following steps:

Step 1: Assign, .button, is-{outlined| loading|} to create outline button states as well as loading button states Correspondingly.
Step 2: To provide different background-color to the button , assign .is-{primary | success | info | danger | warning | link} to the <button> element base class.
Step 3: To create a disabled button, assign disabled property to the button element.

General Syntax

      
        <element class="btn is-{primary | success | info | danger | warning | link} is-{outline | lodaing }"></element>

Try it now

Source Code

          
            <div class="columns is-multiline has-text-centered mt-5 is-mobile">
      <div class="column is-4">
          <button type="button" class="button is-primary is-outlined">Primary</button>
      </div>

      <div class="column is-4">
          <button type="button" class="button is-link is-loading">Link</button>
      </div>

      <div class="column is-4">
         <button type="button" class="button is-info" disabled>Info</button>
      </div>

  </div>

Try it now

Source Code : Output

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4