×

Html & Html5

The World's best Software Development Study Portal

Bootstrap Badges


If we want to add special information or to attract more to the particular text than we can use badges. And we use .badge class for it.
Let’s understand them by this program :-


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container-fluid">

<h2>Badges</h2>

<h1>BestT-shirts <span class="badge badge-secondary">20% discount</span></h1>

</div>

</body>

</html>

Output of this Program


Badges

BestT-shirts 20% discount

Like here through the badges we just attract the 20% discount.



Contextual Badges


If we want to change the color of this badge , so through color also it express the context.
Let’s understand them by this program :-


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container-fluid">

<h2>Color Badges</h2>

<span class="badge badge-primary">Primary</span>

<span class="badge badge-secondary">Secondary</span>

<span class="badge badge-success">Success</span>

<span class="badge badge-danger">Danger</span>

<span class="badge badge-warning">Warning</span>

<span class="badge badge-info">Info</span>

<span class="badge badge-light">Light</span>

<span class="badge badge-dark">Dark</span>

</div>

</body>

</html>

Output of this Program


Color Badges

Primary Secondary Success Danger Warning Info Light Dark

So here we just changed the color of badges .





Badges

<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container">

<h2>Badges</h2>

<h1>Example heading <span class="badge badge-secondary">New</span></h1>

<h2>Example heading <span class="badge badge-secondary">New</span></h2>

<h3>Example heading <span class="badge badge-secondary">New</span></h3>

<h4>Example heading <span class="badge badge-secondary">New</span></h4>

<h5>Example heading <span class="badge badge-secondary">New</span></h5>

<h6>Example heading <span class="badge badge-secondary">New</span></h6>

</div>

</body>

</html>

Output

Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Badges inside a Button

<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container">

<h2>Badge inside a Button</h2>

<button type="button" class="btn btn-primary"> Messages <span class="badge badge-light">4</span>

</button>

<button type="button" class="btn btn-danger"> Notifications <span class="badge badge-light">7</span>

</button>

</div>

</body>

</html>

Output

Badge inside a Button




Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute