Bootstrap Home

Getting Started

File Structure

BOOTSTRAP CSS

Grid System

Bootstrap Typography

Bootstrap Code

Bootstrap Table

Bootstrap Forms

Bootstrap Input

Bootstrap Button

Bootstrap Images

COMPONENTS

Bootstrap Glyphicons

BS Glyphicon List

Bootstrap Alert

Bootstrap Badges

Bootstrap Breadcrumb

Bootstrap Cards

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

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>

Learn HTML

Learn CSS

Learn JS

Learn PHP

Learn ASP

Learn SQL

Learn MySQL

Learn Bootstrap

Learn WP

Learn AJAX

Learn Tools

Learn ANGULAR JS

Learn SEO

Learn Earning

Learn HOW TO

Learn CodeIgniter