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=
</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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...