Bulma Table Modifiers

Last Updated : 17 Feb, 2022

Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior. The best part about the Bulma framework is that it is responsive in nature. It is modular which means that we just need to import whatever we need and basic CSS knowledge is more than enough for using the Bulma framework.

Tables are an essential part of any website to represent the data in an easier way. The Bulma framework provides the facility to create tables with ease. There are times when we have to create tables in a certain manner such as a table with a border or a narrow-sized table, etc. These desired results can be achieved with the help of table modifiers in the Bulma framework that are used to modify the tables.

Bulma Table Modifier Classes:

is-bordered: This class adds borders to every cell of the table.
is-striped: This class adds stripes to the table.
is-narrow: This class narrows the cells.
is-hoverable: This class adds a hover effect on every row.
is-fullwidth: This class makes a fullwidth table.

Syntax:

<table class="table Table-Modifier-Classes">

Let us now have a look at a couple of programs that demonstrate how to create a bordered table and a striped table.

Example 1: The is-bordered table modifier class is used in the following program.

HTML

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "utf-8"> 
      <meta name="viewport" content= 
          "width= device-width, initial-scale=1"> 
      <!--Linking Bulma-->
      <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> 
     <br> 
     <div class="content"> 
       <h1 class="has-text-success">GeeksforGeeks</h1> 
        <strong>Table Modifiers</strong> 
      
      <section class="section"> 
         <div class="container"> 
            <span class="title"> 
               Bordered Table 
            </span> 
            <br> 
            <!--Using Table Modifier-->
            <table class="table is-bordered">  
               <thead> 
                  <tr>    <!--Table Rows-->
                     <th>Name</th> 
                     <th>Sport</th> 
                  </tr> 
               </thead>                
                 
               <tbody> 
                  <tr> 
                     <td>Cristiano</td> <!--Table Data-->
                     <td>Football</td> 
                  </tr> 
                  <tr> 
                     <td>Nadal</td> 
                     <td>Tennis</td> 
                  </tr> 
                  <tr> 
                     <td>Jordan</td> 
                     <td>Basketball</td> 
                  </tr> 
                   <tr> 
                    <td>Lara</td> 
                    <td>Cricket</td> 
                 </tr> 
               </tbody> 
            </table>             
         </div> 
      </section>  
    </div>       
   </body> 
</html>

Output:

Bulma Table Modifiers

Example 2: The is-striped table modifier class is used in the following program.

HTML

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "utf-8"> 
      <meta name="viewport" 
            content="width= device-width, initial-scale=1"> 
      <!--Linking Bulma-->
      <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> 
     <br> 
     <div class="content"> 
       <h1 class="has-text-success">GeeksforGeeks</h1> 
        <strong>Table Modifiers</strong> 
      
      <section class="section"> 
         <div class="container"> 
            <span class="title"> 
               Striped Table 
            </span> 
            <br> 
              
           <!--Using Table Modifier-->
            <table class="table is-striped">  
               <thead> 
                  <tr>    <!--Table Rows-->
                     <th>Country</th> 
                     <th>Capital</th> 
                  </tr> 
               </thead>                
                 
                <tbody> 
                  <tr> 
                     <td>India</td> <!--Table Data-->
                     <td>New Delhi</td> 
                  </tr> 
                  <tr> 
                     <td>Australia</td> 
                     <td>Canberra</td> 
                  </tr> 
                  <tr> 
                     <td>France</td> 
                     <td>Paris</td> 
                  </tr> 
                   <tr> 
                    <td>England</td> 
                    <td>London</td> 
                 </tr> 
               </tbody> 
            </table>             
         </div> 
      </section>  
    </div>       
   </body> 
</html>