Blog

Bulma – Modifiers syntax and Responsive Helpers

Bulma Modifiers syntax and Responsive Helpers

In this guide, we will discuss 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 −

<!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.

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

<!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.

Helpers

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

S.No.HelperDescription
1is-clearfixIt clears the floated content within container.
2is-pulled-leftIt moves an element to left side.
3is-pulled-rightIt moves an element to right side.
4is-marginlessIt removes the margin.
5is-paddinglessIt removes the padding.
6is-overlayIt creates an overlay effect of an element by making the background transparent.
7is-clippedIt adds the overflow hidden.
8is-radiuslessIt removes the radius.
9is-shadowlessIt removes the shadow.
10is-unselectableIt makes the element unselectable, when clicking.
11is-invisibleIt hides the visibility functionality.
12is-sr-onlyIt 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.ClassMobile (till 768px)Tablet (769px to 1023px)Desktop (1024px to 1215px)Widescreen (1216px to 1407px)FullHD (above 1408px)
1is-flex-mobileflexun-changedun-changedun-changedun-changed
2is-flex-tablet-onlyun-changedflexun-changedun-changedun-changed
3is-flex-desktop-onlyun-changedun-changedflexun-changedun-changed
4is-flex-widescreen-onlyun-changedun-changedun-changedflexun-changed

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

S.No.ClassMobile (till 768px)Tablet (from 769px to 1023px)Desktop (from 1024px to 1215px)Widescreen (from 1216px to 1407px)FullHD (above 1408px)
1is-flex-touchflexflexun-changedun-changedun-changed
2is-flex-tabletun-changedflexflexflexflex
3is-flex-desktopun-changedun-changedflexflexflex
4is-flex-widescreenun-changedun-changedun-changedflexflex
5is-flex-fullhdun-changedun-changedun-changedun-changedflex

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

S.No.ClassMobile (till 768px)Tablet (from 769px to 1023px)Desktop (from 1024px to 1215px)Widescreen (from 1216px to 1407px)FullHD (above 1408px)
1is-hidden-mobilehiddenvisiblevisiblevisiblevisible
2is-hidden-tablet-onlyvisiblehiddenvisiblevisiblevisible
3is-hidden-desktop-onlyvisiblevisiblehiddenvisiblevisible
4is-hidden-widescreen-onlyvisiblevisiblevisiblehiddenvisible

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

S.No.ClassMobile (till 768px)Tablet (from 769px to 1023px)Desktop (from 1024px to 1215px)Widescreen (from 1216px to 1407px)FullHD (above 1408px)
1is-hidden-touchhiddenhiddenvisiblevisiblevisible
2is-hidden-tabletvisiblehiddenhiddenhiddenhidden
3is-hidden-desktopvisiblevisiblehiddenhiddenhidden
4is-hidden-widescreenvisiblevisiblevisiblehiddenhidden
5is-hidden-fullhdvisiblevisiblevisiblevisiblehidden

Next Topic : Click Here

This Post Has 3 Comments

Leave a Reply