Bulma - Color and Typography Helpers

Description

You can use the color helpers for changing color of the text or background.

Text Color

S.No. Class Color
1 has-text-white hsl(0, 0%, 100%)
2 has-text-black hsl(0, 0%, 4%)
3 has-text-light hsl(0, 0%, 96%)
4 has-text-dark hsl(0, 0%, 21%)
5 has-text-primary hsl(171, 100%, 41%)
6 has-text-info hsl(204, 86%, 53%)
7 has-text-link hsl(217, 71%, 53%)
8 has-text-success hsl(141, 71%, 48%)
9 has-text-warning hsl(48, 100%, 67%)
10 has-text-danger hsl(348, 100%, 61%)
11 has-text-black-bis hsl(0, 0%, 7%)
12 has-text-black-ter hsl(0, 0%, 14%)
13 has-text-grey-darker hsl(0, 0%, 21%)
14 has-text-grey-dark hsl(0, 0%, 29%)
15 has-text-grey hsl(0, 0%, 48%)
16 has-text-grey-light hsl(0, 0%, 71%)
17 has-text-grey-lighter hsl(0, 0%, 86%)
18 has-text-white-ter hsl(0, 0%, 96%)
19 has-text-white-bis hsl(0, 0%, 98%)

Background Color

S.No. Class Color
1 has-background-white hsl(0, 0%, 100%)
2 has-background-black hsl(0, 0%, 4%)
3 has-background-light hsl(0, 0%, 96%)
4 has-background-dark hsl(0, 0%, 21%)
5 has-background-primary hsl(171, 100%, 41%)
6 has-background-info hsl(204, 86%, 53%)
7 has-background-link hsl(217, 71%, 53%)
8 has-background-success hsl(141, 71%, 48%)
9 has-background-warning hsl(48, 100%, 67%)
10 has-background-danger hsl(348, 100%, 61%)
11 has-background-black-bis hsl(0, 0%, 7%)
12 has-background-black-ter hsl(0, 0%, 14%)
13 has-background-grey-darker hsl(0, 0%, 21%)
14 has-background-grey-dark hsl(0, 0%, 29%)
15 has-background-grey hsl(0, 0%, 48%)
16 has-background-grey-light hsl(0, 0%, 71%)
17 has-background-grey-lighter hsl(0, 0%, 86%)
18 has-background-white-ter hsl(0, 0%, 96%)
19 has-background-white-bis hsl(0, 0%, 98%)

Typography Helpers

Typography helpers are used for changing size and color of the text. Bulma contains 7 types of sizes as shown in the below table −

S.No. Class Font Size
1 is-size-1 3rem
2 is-size-2 2.5rem
3 is-size-3 2rem
4 is-size-4 1.5rem
5 is-size-5 1.25rem
6 is-size-6 1rem
7 is-size-7 0.75rem

Let's create a simple example by using the above sizes −

Live Demo 
<!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 −

Colors

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 −

Live Demo 
<!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 −

Alignment

Bulma provides 4 types of alignment helpers to align the text in the container.

S.No. Class Alignment
1 has-text-centered Display the text in the center.
2 has-text-justified Display the text as justified.
3 has-text-left Display the text to the left side.
4 has-text-right Display the text to the right side.

Let's create a simple example by using above alignment classes −

Live Demo 
<!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 −

Text Transformation

Bulma provides 4 types of text transformation helpers to transform the text in the container.

S.No. Class Transformation
1 is-capitalized It transforms the first character of each word to uppercase.
2 is-lowercase It defines all the characters to lowercase.
3 is-uppercase It defines all the characters to uppercase.
4 is-italic It defines all the characters to italic.

Let's create a simple example by using above text transformation classes −

Live Demo 
<!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 −

Text Weight

Bulma provides 4 types of text weight helpers to transform the text weight in the container.

S.No. Class Alignment
1 has-text-weight-light It displays the text weight as light.
2 has-text-weight-normal It displays the text weight as normal.
3 has-text-weight-semibold It displays the text weight as semi-bold (not thick as bold).
4 has-text-weight-bold It displays the text weight as bold.

Let's create a simple example by using above text weight classes −

Live Demo 
<!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 −

bulma_modifiers.htm
Advertisements