Bulma - Modifiers syntax and Responsive Helpers

Description

You can create alternative styles for the elements by using modifier classes and use the responsive classes to alter styles. The modifier classes start with is-ClassName or has-ClassName and using these classes, you can provide different types of styles for the elements.

Example

Let's create a simple button along with modifier classes such as is-primary, is-info, is-success, is-warning, is-danger and different types of button sizes by using is-small, is-medium and is-large classes as shown below −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Modifiers Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Simple Button
            </span>
            <br>
            <br>	  
            
            <a class = "button">
               Button
            </a>
         </div>
         <br>
         
         <div class = "container">
            <span class = "title">
               Using Modifier Classes
            </span>
            <br>
            <br>	  
            
            <a class = "button is-primary">is-primary</a>
            <a class = "button is-link">is-link</a>
            <a class = "button is-info">is-info</a>
            <a class = "button is-success">is-success</a>
            <a class = "button is-warning">is-warning</a>
            <a class = "button is-danger">is-danger</a>
         </div>
         <br>
         
          <div class = "container">
            <span class = "title">
            Resized Button
            </span>
            <br>
            <br>	  
            
            <a class = "button is-small">is-small</a>
            <a class = "button is-medium">is-medium</a>
            <a class = "button is-large">is-large</a>
         </div>
      </section>
      
   </body>
</html>

Save the above code in the HTML file and open it in a browser. It will display the output as shown below −

You can also change style or state of the button by using is-primary, is-outlined, is-loading, is-large classes as shown below −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Modifiers Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               State of Button
            </span>
            <br>
            <br>	  
            
            <a class = "button is-primary is-outlined">
               is-outlined
            </a>
            
            <a class = "button is-info is-loading">
               is-loading
            </a>
            
            <a class = "button" disabled>
               disabled
            </a>
            
            <a class = "button is-danger is-outlined is-large">
               is-outlined & is-large
            </a>
         </div>
      </section>
   </body>
</html>

Execute the above code and you will get the output as shown below −

Helpers

You can use the below helper classes to alter styles of elements −

S.No.	Helper	Description
1	is-clearfix	It clears the floated content within container.
2	is-pulled-left	It moves an element to left side.
3	is-pulled-right	It moves an element to right side.
4	is-marginless	It removes the margin.
5	is-paddingless	It removes the padding.
6	is-overlay	It creates an overlay effect of an element by making the background transparent.
7	is-clipped	It adds the overflow hidden.
8	is-radiusless	It removes the radius.
9	is-shadowless	It removes the shadow.
10	is-unselectable	It makes the element unselectable, when clicking.
11	is-invisible	It hides the visibility functionality.
12	is-sr-only	It hides elements visually, but will be available for screen reader.

Responsive Helpers

You can show the content, based on the width of viewport by using below display classes −

block
flex
inline
inline-block
inline-flex

Here, we are using is-flex helper to represent the different types of classes along with it. You can use other options, by replacing is-flex class with is-block, is-inline, is-inline-block and is-inline-flex.

S.No.	Class	Mobile (till 768px)	Tablet (769px to 1023px)	Desktop (1024px to 1215px)	Widescreen (1216px to 1407px)	FullHD (above 1408px)
1	is-flex-mobile	flex	un-changed	un-changed	un-changed	un-changed
2	is-flex-tablet-only	un-changed	flex	un-changed	un-changed	un-changed
3	is-flex-desktop-only	un-changed	un-changed	flex	un-changed	un-changed
4	is-flex-widescreen-only	un-changed	un-changed	un-changed	flex	un-changed

You can show the elements up to or from specific breakpoint by using below classes −

S.No.	Class	Mobile (till 768px)	Tablet (from 769px to 1023px)	Desktop (from 1024px to 1215px)	Widescreen (from 1216px to 1407px)	FullHD (above 1408px)
1	is-flex-touch	flex	flex	un-changed	un-changed	un-changed
2	is-flex-tablet	un-changed	flex	flex	flex	flex
3	is-flex-desktop	un-changed	un-changed	flex	flex	flex
4	is-flex-widescreen	un-changed	un-changed	un-changed	flex	flex
5	is-flex-fullhd	un-changed	un-changed	un-changed	un-changed	flex

You can hide the content, based on the width of viewport by using below classes −

S.No.	Class	Mobile (till 768px)	Tablet (from 769px to 1023px)	Desktop (from 1024px to 1215px)	Widescreen (from 1216px to 1407px)	FullHD (above 1408px)
1	is-hidden-mobile	hidden	visible	visible	visible	visible
2	is-hidden-tablet-only	visible	hidden	visible	visible	visible
3	is-hidden-desktop-only	visible	visible	hidden	visible	visible
4	is-hidden-widescreen-only	visible	visible	visible	hidden	visible

You can hide the elements up to or from specific breakpoint by using below classes −

S.No.	Class	Mobile (till 768px)	Tablet (from 769px to 1023px)	Desktop (from 1024px to 1215px)	Widescreen (from 1216px to 1407px)	FullHD (above 1408px)
1	is-hidden-touch	hidden	hidden	visible	visible	visible
2	is-hidden-tablet	visible	hidden	hidden	hidden	hidden
3	is-hidden-desktop	visible	visible	hidden	hidden	hidden
4	is-hidden-widescreen	visible	visible	visible	hidden	hidden
5	is-hidden-fullhd	visible	visible	visible	visible	hidden

bulma_modifiers.htm