Skip to content
Related Articles

Related Articles

Bulma Table Variables

View Discussion
Improve Article
Save Article
  • Last Updated : 28 Jul, 2022
View Discussion
Improve Article
Save Article

Bulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. 

Bulma supports a lot of types of tables like a bordered table, stripped table, hoverable table, scrollable table, etc. Just by adding some Bulma classes to the HTML, we can achieve very interactive tables.

 Syntax to use variables:

$property-name: Property-value;

Variable Used:

Name Description        Type Value Computed Value Computed Type
$table-color This property is used to provide color to the table. variable $text-strong hsl(0, 0%, 21%) color
$table-background-color This property is used to provide background color to the table. variable $scheme-main hsl(0, 0%, 100%) color
$table-cell-border This property is used to provide a border cell to the table. size 1px solid $border    
$table-cell-border-width This property is used to define the border width of the table. size 0 0 1px    
$table-cell-padding This property is used to define the padding of the cell in the table. size 0.5em 0.75em    
$table-cell-heading-color This property is used to provide color to the heading cell of the table. variable $text-strong hsl(0, 0%, 21%) color
$table-cell-text-align This property is used to align text into the center of the cell in the table. string left    
$table-head-cell-border-width  This property is used to define the width of the head cell border. size 0 0 2px    
$table-head-cell-color This property is used to define the color of the head cell of the table. variable $text-strong hsl(0, 0%, 21%) color
$table-foot-cell-border-width This property is used to define the width of the foot cell in the table. size 2px 0 0    
$table-foot-cell-color This property is used to define the color of the foot of the cell. variable $text-strong hsl(0, 0%, 21%) color
$table-head-background-color This property is used to provide the background color of the head of the table. string transparent    
$table-body-background-color This property is used to provide the background color of the body. string transparent    
$table-foot-background-color  This property is used to provide background color to the foot table. string transparent    
$table-row-hover-background-color This property is used to provide background color to the row table on hover. variable $scheme-main-bis hsl(0, 0%, 98%) color
$table-row-active-background-color This property is used to provide background color to the active row. variable $primary hsl(171, 100%, 41%) color
$table-row-active-color This property is used to provide color to the active row of the table. variable $primary-invert #fff color
$table-striped-row-even-background-color This property is used to provide background color to the even row. variable $scheme-main-bis hsl(0, 0%, 98%) color
$table-striped-row-even-hover-background-color This property is used to provide background color to the even rows on hover. variable $scheme-main-ter hsl(0, 0%, 96%) color
$table-colors This property is used to provide color to the table. variable $colors Bulma colors map

Example 1: In the below code, we will make use of the above variable to demonstrate the use of the table.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Variable</title>
    <link rel='stylesheet' href=
  
    <!-- font-awesome cdn -->
    <script src=
    </script>
    <link rel="stylesheet" href="style.css">
    <style>
        .title{
            color:green;
        }
        nav{
            margin-left:200px;
            margin-right:200px;
        }
    </style>
</head>
  
<body>
    <h1 class="title has-text-centered">
        GeekforGeeks
    </h1>
    <h3 class="subtitle has-text-centered">
            A computer science portal for geeks.
    </h3><br>
  
    <div class='container has-text-centered'>
        <div class='columns is-mobile is-centered'>
            <div class='column is-8'>
                <div>
                  <h1 class='title'>User Information</h1>
                  <hr>
                </div>
                <table class='table'>
                    <thead>
                        <tr>
                          <th>Username</th>
                          <th>Email</th>
                          <th>Gender</th>
                          <th>Address</th>
                          <th>Phone No.</th>
                        </tr>
                     </thead>
                    <tbody>
                        <tr>
                          <td>vinod34</td>
                          <td>vilod565@gmail.com</td>
                          <td>Male</td>
                          <td>West Bengal</td>
                          <td>9856777809</td>
                        </tr>
               
                        <tr>
                          <td>deepak13</td>
                          <td>deepak13@gmail.com</td>
                          <td>Male</td>
                          <td>Mumbai</td>
                          <td>6556455521</td>
                        </tr>
           
                        <tr>
                          <td>sneha345</td>
                          <td>sneha345@gmail.com</td>
                          <td>Female</td>
                          <td>Dadar</td>
                          <td>7674544434</td>
                        </tr>
               
                        <tr>
                          <td>saimi875</td>
                          <td>saimi875@gmail.com</td>
                          <td>Male</td>
                          <td>Borivali</td>
                          <td>8767543452</td>
                        </tr>
           
                        <tr>
                          <td>santra765</td>
                          <td>santra765@gmail.com</td>
                          <td>Female</td>
                          <td>Dahisar</td>
                          <td>9567345237</td>
                        </tr>    
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>


SCSS Code:

$table-colors:lightgreen;
.table{
   color:$table-colors;
}

Compiled CSS Code:

.table {
 color: lightgreen; }

Output:

 

Example 2: In the below code, we will make use of the above variable to demonstrate the use of the table.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Variable</title>
    <link rel='stylesheet' href=
  
    <!-- font-awesome cdn -->
    <script src=
    </script>
    <link rel="stylesheet" href="style.css">
  
    <style>
        .title{
            color:green;
        }
        nav{
            margin-left:200px;
            margin-right:200px;
        }
    </style>
</head>
  
<body>
    <h1 class="title has-text-centered">
        GeekforGeeks
    </h1>
    <h3 class="subtitle has-text-centered">
        A computer science portal for geeks.
    </h3><br>
  
    <div class='container has-text-centered'>
        <div class='columns is-mobile is-centered'>
            <div class='column is-8'>
                <div>
                  <h1 class='title'>User Information</h1>
                  <hr>
                </div>
                <table class='table'>
                    <thead>
                        <tr>
                          <th>Username</th>
                          <th>Email</th>
                          <th>Gender</th>
                          <th>Address</th>
                          <th>Phone No.</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                          <td>vinod34</td>
                          <td>vilod565@gmail.com</td>
                          <td>Male</td>
                          <td>West Bengal</td>
                          <td>9856777809</td>
                        </tr>
               
                        <tr>
                          <td>deepak13</td>
                          <td>deepak13@gmail.com</td>
                          <td>Male</td>
                          <td>Mumbai</td>
                          <td>6556455521</td>
                        </tr>
           
                        <tr>
                          <td>sneha345</td>
                          <td>sneha345@gmail.com</td>
                          <td>Female</td>
                          <td>Dadar</td>
                          <td>7674544434</td>
                        </tr>
               
                        <tr>
                          <td>saimi875</td>
                          <td>saimi875@gmail.com</td>
                          <td>Male</td>
                          <td>Borivali</td>
                          <td>8767543452</td>
                        </tr>
           
                        <tr>
                          <td>santra765</td>
                          <td>santra765@gmail.com</td>
                          <td>Female</td>
                          <td>Dahisar</td>
                          <td>9567345237</td>
                        </tr>    
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>


SCSS Code:

$table-background-color:lightgreen;
.table{
   background-color:$table-background-color;
 }

Compiled CSS Code:

.table {
   background-color: lightgreen;
 }

Output:

 

Reference: https://bulma.io/documentation/elements/table/#variables


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!