Badges
Badges are numerical indicators to highlight the number of items associated with a link or new or unread item. The class. badge within the <span> element is used to create badges.
We can have some variations in badges using the following classes:
Class | Description | Syntax |
---|---|---|
Contextual variations | Used to change the appearance of a badge. | .badge .bg-* |
Pill Badges | Used to make badges more rounded | .rounded-pill |
Example Code:
<!DOCTYPE html>
<html>
<head>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div style="text-align: center;width: 600px;">
<h5 style="color: green;">
w3wiki
</h5>
</div>
<div id="canvas" style="width: 600px;
height: 200px;margin:20px;">
<h5>
Primary
<span class="badge bg-primary">
w3wiki
</span>
</h5>
<h5>
Secondary
<span class="badge bg-secondary">
w3wiki
</span>
</h5>
<h5>
Success
<span class="badge bg-success">
w3wiki
</span>
</h5>
<h5>
Danger
<span class="badge bg-danger">
w3wiki
</span>
</h5>
<h5>
Light
<span class="badge bg-light text-dark">
w3wiki
</span>
</h5>
<h5>
Dark
<span class="badge bg-dark">
w3wiki
</span>
</h5>
<h5>Pill Badge
<span class="badge badge-warning badge-pill">
2
</span>
</h5>
<h5>Badge inside an element
<button type="button" class="btn btn-primary">
Notifications
<span class="badge bg-secondary">
10
</span>
</button
></h5>
</div>
</body>
</html>
Bootstrap Cheat Sheet – A Basic Guide to Bootstrap
Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all sizes of screens.
Contact Us