saftutorials.com
Bootstrap Badges Tutorial

Bootstrap Badges make simple badges for highlighting any text. You can use it's for your text highlighting using .badge class.


Example of Bootstrap Badges

Example of heading I am Highlighting

Example of heading I am Highlighting

Example of heading I am Highlighting

Example of heading I am Highlighting

Example of heading I am Highlighting
Example of heading I am Highlighting


Code

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<h1>Example of heading <span class="badge badge-secondary">I am Highlighing</span></h1>
<h2>Example of heading <span class="badge badge-secondary">I am Highlighing</span></h2>
<h3>Example of heading <span class="badge badge-secondary">I am Highlighing</span></h3>
<h4>Example of heading <span class="badge badge-secondary">I am Highlighing</span></h4>
<h5>Example of heading <span class="badge badge-secondary">I am Highlighing</span></h5>
<h6>Example of heading <span class="badge badge-secondary">I am Highlighing</span></h6>
</body>
</html>


Varieties Class of Badges

I am Primary Badges

I am Secondary Badges

I am Success Badges

I am Danger Badges

I am Warning Badges

I am Info Badges

I am Light Badges

I am Dark Badges


Code:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <p><span class="badge badge-primary">I am Primary Badges</span></p>
  <p><span class="badge badge-secondary">I am Secondary Badges</span></p>
  <p><span class="badge badge-success">I am Success Badges</span></p>
  <p><span class="badge badge-danger">I am Danger Badges</span></p>
  <p><span class="badge badge-warning">I am Warning Badges</span></p>
  <p><span class="badge badge-info">I am Info Badges</span></p>
  <p><span class="badge badge-light">I am Light Badges</span></p>
  <p><span class="badge badge-dark">I am Dark Badges</span></p>
</body>
</html>


Bootstrap Pill Badges

I am Primary Pill Badges

I am Secondary Pill Badges

I am Success Pill Badges

I am Danger Pill Badges

I am Warning Pill Badges

I am Info Pill Badges

I am Light Pill Badges

I am Dark Pill Badges


Code:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <p><span class="badge badge-pill badge-primary">I am Primary Pill Badges</span></p>
  <p><span class="badge badge-pill badge-secondary">I am Secondary Pill Badges</span></p>
  <p><span class="badge badge-pill badge-success">I am Success Pill Badges</span></p>
  <p><span class="badge badge-pill badge-danger">I am Danger Pill Badges</span></p>
  <p><span class="badge badge-pill badge-warning">I am Warning Pill Badges</span></p>
  <p><span class="badge badge-pill badge-info">I am Info Pill Badges</span></p>
  <p><span class="badge badge-pill badge-light">I am Light Pill Badges</span></p>
  <p><span class="badge badge-pill badge-dark">I am Dark Pill Badges</span></p>
</body>
</html>

Bootstrap Badges with Link

I am Primary Badges link

I am Secondary Badges link

I am Success Badges link

I am Danger Badges link

I am Warning Badges link

I am Info Badges link

I am Light Badges link

I am Dark Badges link


Code:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<p><a href="#" class="badge badge-primary">I am Primary Badges link</a></p>
<p><a href="#" class="badge badge-secondary">I am Secondary Badges link</a></p>
<p><a href="#" class="badge badge-success">I am Success Badges link</a></p>
<p><a href="#" class="badge badge-danger">I am Danger Badges link</a></p>
<p><a href="#" class="badge badge-warning">I am Warning Badges link</a></p>
<p><a href="#" class="badge badge-info">I am Info Badges link</a></p>
<p><a href="#" class="badge badge-light">I am Light Badges link</a></p>
<p><a href="#" class="badge badge-dark">I am Dark Badges link</a></p>
</body>
</html>


Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic