Bulma - Color and Typography Helpers

You can use the color helpers for changing color of the text or background.
Typography helpers are used for changing size and color of the text. Bulma contains 7 types of sizes as shown in the below table −
Let's create a simple example by using the above sizes −
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Typography Helpers 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 = "is-size-1">
               7 types of sizes
            </span><br><br>
            
            <span class = "is-size-1">
               Tutorialspoint
            </span><br>  
            
            <span class = "is-size-2">
               Tutorialspoint
            </span><br>
            
            <span class = "is-size-3">
               Tutorialspoint
            </span><br>
            
            <span class = "is-size-4">
               Tutorialspoint
            </span><br>
            
            <span class = "is-size-5">
               Tutorialspoint
            </span><br>
            
            <span class = "is-size-6">
               Tutorialspoint
            </span><br>
            
            <span class = "is-size-7">
               Tutorialspoint
            </span><br>
         </div>
      </section>
   </body>
</html>
It will display the output as shown below −
Bulma provides different types of color classes for setting the elements in the container. Refer the above Text Color section, to create an example by using color classes as shown below −
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Typography Helpers 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">
               Text color using color classes
            </span>
            <br>
            
            <span class = "has-text-primary">
               Tutorialspoint
            </span><br>
            
            <span class = "has-text-link">
               Tutorialspoint
            </span><br>  
            
            <span class = "has-text-black-bis">
               Tutorialspoint
            </span><br>
            
            <span class = "has-text-grey">
               Tutorialspoint
            </span><br>
            
            <span class = "has-text-grey-lighter">
               Tutorialspoint
            </span><br>
            
            <span class = "has-text-danger">
               Tutorialspoint
            </span>
         </div>
      </section>
   </body>
</html>
It displays output as shown below −
Bulma provides 4 types of alignment helpers to align the text in the container.
Let's create a simple example by using above alignment classes −
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Alignment Helpers 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">
               Alignment
            </span>
            <br>
            <br>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-centered"> has-text-centered</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-justified"> has-text-justified</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-left"> has-text-left</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-right"> has-text-right</p>
               </div>
            </div>
         </div>
      </section>
      
   </body>
</html>
It displays output as shown below −
 has-text-centered
 has-text-justified
 has-text-left
 has-text-right
Bulma provides 4 types of text transformation helpers to transform the text in the container.
Let's create a simple example by using above text transformation classes −
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Text Transformation Helpers 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">
               Text Transformation
            </span><br><br>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info is-capitalized"> is-capitalized</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info is-lowercase"> is-lowercase</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info is-uppercase"> is-uppercase</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info is-italic"> has-is-italic</p>
               </div>
            </div>
         </div>
      </section>
      
   </body>
</html>
It displays output as shown below −
 is-capitalized
 is-lowercase
 is-uppercase
 has-is-italic
Bulma provides 4 types of text weight helpers to transform the text weight in the container.
Let's create a simple example by using above text weight classes −
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Text Weight Helpers 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">
               Text Weight
            </span>
            <br>
            <br>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-weight-light"> has-text-weight-light</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-weight-normal"> has-text-weight-normal</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-weight-semibold"> has-text-weight-semibold</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-weight-bold"> has-text-weight-bold</p>
               </div>
            </div>
         </div>
      </section>
      
   </body>
</html>
It displays output as shown below −
 has-text-weight-light
 has-text-weight-normal
 has-text-weight-semibold
 has-text-weight-bold
 Print
 Add Notes
 Bookmark this page