Skip to content
Related Articles

Related Articles

Improve Article

How to put a badge in a table cell using Bootstrap?

  • Last Updated : 13 Jul, 2021
Geek Week

In this article, we will learn how to use badges in a table cell using Bootstrap. We will first learn how to use Bootstrap Badges and then add them inside cells of a table.

Bootstrap Badges: Responsive Badges are included with the newest Bootstrap version. Badges add additional info like count or label to any content. The styling of badges provides a visible cue of their purpose. These badges can appear at the tip of a sentence, link, or button. The example below demonstrates Bootstrap badges.

Example: Here we will use the bafges in noramll form, in the next example we will use that in a table cell.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body class="container pt-4">
    <h5>Button</h5>
  
    <button type="button" class="btn btn-success">
        Public Celebrity
        <span class="badge badge-light">7</span>
    </button>
    <br><br>
      
    <h5>Headings</h5>
    <h1>GFG Classic
        <span class="badge badge-secondary">
            Krishna K
        </span>
    </h1>
    <h2>GFG Classic
        <span class="badge badge-secondary">
            Krishna K
        </span>
    </h2>
    <h3>GFG Classic
        <span class="badge badge-secondary">
            Krishna K
        </span>
    </h3>
    <br>
    <h5>Pill Badges</h5>
    <span class="badge badge-pill badge-success">
        GFG S
    </span>
    <span class="badge badge-pill badge-danger">
        GFG D
    </span>
    <span class="badge badge-pill badge-warning">
        GFG W
    </span>
    <br><br>
    <h5>Links</h5>
    <a href="#" class="badge badge-primary">
        GFG P
    </a>
    <a href="#" class="badge badge-info">
        GFG I
    </a>
    <a href="#" class="badge badge-light">
        GFG L
    </a>
</body>
  
</html>

Output:



Badges in a Cell: The badges can be placed in a table cell by simply including the division containing the badge in one of the table cells. This can be used to highlight some text in the table. The below examples demonstrate the use of badges inside a table cell.

Example 1: In this example, we will show the badges in the first column and other text in the second column.

HTML




<!DOCTYPE html>
<html>
  
<head>
    </script>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="container pt-4">
        <h2>Badge inside cell Example 1</h2>
        <table class="table table-responsive">
            <thead>
                <tr>
                    <th>Badge</th>
                    <th>Content</th>
                </tr>
            </thead>
  
            <tbody>
                <tr>
                    <td><span class="badge badge-success
                           text-uppercase">
                            Success
                        </span>
                    </td>
                    <td>This is the success content</td>
                </tr>
                <tr>
                    <td><span class="badge badge-warning 
                           text-uppercase">
                            Warning
                        </span>
                    </td>
                    <td>This is the warning content</td>
                </tr>
                <tr>
                    <td><span class="badge badge-danger 
                           text-uppercase">
                            Danger
                        </span>
                    </td>
                    <td>This is the danger content</td>
                </tr>
                <tr>
                    <td><span class="badge badge-dark
                           text-uppercase">
                            Dark
                        </span>
                    </td>
                    <td>This is the dark content</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
  
</html>

Output:

Example 2: In this example, we will show the badges next to the contents of the table cell.

HTML




<!DOCTYPE html>
<html>
  
<head>
    </script>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="container pt-4">
        <h2>Badge inside cell Example 2</h2>
        <table class="table table-responsive">
            <thead>
                <tr>
                    <th>S.No</th>
                    <th>Policy Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Spring Sale
                        <span class="badge badge-primary 
                           text-uppercase">new
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Summer Special 21
                        <span class="badge badge-primary
                           text-uppercase">new
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Winter Wardrobe 19
                        <span class="badge badge-danger 
                           text-uppercase">expired
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>All Day Bonanza
                        <span class="badge badge-danger 
                           text-uppercase">expired
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :