Blog

Bulma – Color and Typography Helpers

Bulma Color and Typography Helpers

In this guide, we will discuss Bulma Color and Typography Helpers.

Description

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

Text Color

S.No.ClassColor
1has-text-whitehsl(0, 0%, 100%)
2has-text-blackhsl(0, 0%, 4%)
3has-text-lighthsl(0, 0%, 96%)
4has-text-darkhsl(0, 0%, 21%)
5has-text-primaryhsl(171, 100%, 41%)
6has-text-infohsl(204, 86%, 53%)
7has-text-linkhsl(217, 71%, 53%)
8has-text-successhsl(141, 71%, 48%)
9has-text-warninghsl(48, 100%, 67%)
10has-text-dangerhsl(348, 100%, 61%)
11has-text-black-bishsl(0, 0%, 7%)
12has-text-black-terhsl(0, 0%, 14%)
13has-text-grey-darkerhsl(0, 0%, 21%)
14has-text-grey-darkhsl(0, 0%, 29%)
15has-text-greyhsl(0, 0%, 48%)
16has-text-grey-lighthsl(0, 0%, 71%)
17has-text-grey-lighterhsl(0, 0%, 86%)
18has-text-white-terhsl(0, 0%, 96%)
19has-text-white-bishsl(0, 0%, 98%)

Background Color

S.No.ClassColor
1has-background-whitehsl(0, 0%, 100%)
2has-background-blackhsl(0, 0%, 4%)
3has-background-lighthsl(0, 0%, 96%)
4has-background-darkhsl(0, 0%, 21%)
5has-background-primaryhsl(171, 100%, 41%)
6has-background-infohsl(204, 86%, 53%)
7has-background-linkhsl(217, 71%, 53%)
8has-background-successhsl(141, 71%, 48%)
9has-background-warninghsl(48, 100%, 67%)
10has-background-dangerhsl(348, 100%, 61%)
11has-background-black-bishsl(0, 0%, 7%)
12has-background-black-terhsl(0, 0%, 14%)
13has-background-grey-darkerhsl(0, 0%, 21%)
14has-background-grey-darkhsl(0, 0%, 29%)
15has-background-greyhsl(0, 0%, 48%)
16has-background-grey-lighthsl(0, 0%, 71%)
17has-background-grey-lighterhsl(0, 0%, 86%)
18has-background-white-terhsl(0, 0%, 96%)
19has-background-white-bishsl(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.ClassFont Size
1is-size-13rem
2is-size-22.5rem
3is-size-32rem
4is-size-41.5rem
5is-size-51.25rem
6is-size-61rem
7is-size-70.75rem

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">
               Adglob
            </span><br>  
            
            <span class = "is-size-2">
               Adglob
            </span><br>
            
            <span class = "is-size-3">
               Adglob
            </span><br>
            
            <span class = "is-size-4">
               Adglob
            </span><br>
            
            <span class = "is-size-5">
               Adglob
            </span><br>
            
            <span class = "is-size-6">
               Adglob
            </span><br>
            
            <span class = "is-size-7">
               Adglob
            </span><br>
         </div>
      </section>
   </body>
</html>

It will display the output.

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 −

<!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">
               Adglob
            </span><br>
            
            <span class = "has-text-link">
               Adglob
            </span><br>  
            
            <span class = "has-text-black-bis">
               Adglob
            </span><br>
            
            <span class = "has-text-grey">
               Adglob
            </span><br>
            
            <span class = "has-text-grey-lighter">
               Adglob
            </span><br>
            
            <span class = "has-text-danger">
               Adglob
            </span>
         </div>
      </section>
   </body>
</html>

It displays output.

Alignment

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

S.No.ClassAlignment
1has-text-centeredDisplay the text in the center.
2has-text-justifiedDisplay the text as justified.
3has-text-leftDisplay the text to the left side.
4has-text-rightDisplay the text to the right side.

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.

Text Transformation

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

S.No.ClassTransformation
1is-capitalizedIt transforms the first character of each word to uppercase.
2is-lowercaseIt defines all the characters to lowercase.
3is-uppercaseIt defines all the characters to uppercase.
4is-italicIt defines all the characters to italic.

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.

Text Weight

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

S.No.ClassAlignment
1has-text-weight-lightIt displays the text weight as light.
2has-text-weight-normalIt displays the text weight as normal.
3has-text-weight-semiboldIt displays the text weight as semi-bold (not thick as bold).
4has-text-weight-boldIt displays the text weight as bold.

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.

Next Topic : Click Here

This Post Has 2 Comments

Leave a Reply