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

Last Updated : 29 Nov, 2022

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 badges in normal form, in the next example we will use that in a table cell.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://code.jquery.com/jquery-3.4.1.slim.min.js">
    </script>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
    </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 src="https://code.jquery.com/jquery-3.4.1.slim.min.js">
    </script>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
    </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.