CodesJava

Easy learning with example program codes

Bootstrap 4 Badges Tutorial


Badges are used to add additional information to any content. For example here News 5 numerical indicators refers to number of items associated with the News link.
The .badge class is used with elements to create badges.

Bootstrap 4 Badges Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Badges Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Bootstrap 4 Badges Example</h2>
  <a href="#">News <span class="badge">3</span></a><br>
  <a href="#">Comments <span class="badge">15</span></a><br>
  <a href="#">Updates <span class="badge">8</span></a>
</div>
 
</body>
</html>

Try it:

Bootstrap 4 Badges Example on jsbin.com

Note: Bootstrap also provide the facility to use Badges inside other elements, such as buttons.

Bootstrap 4 Badges On Buttons Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Badges On Buttons Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2> Bootstrap 4 Badges On Buttons Example </h2>
  <button type="button" class="btn btn-primary">Primary <span class="badge">8</span></button>
  <button type="button" class="btn btn-success">Success <span class="badge">5</span></button>    
  <button type="button" class="btn btn-danger">Danger <span class="badge">9</span></button>        
</div>
 
</body>
</html>

Try it:

Bootstrap 4 Badges On Buttons Example on jsbin.com

Note: Bootstrap 4 also provide the facility to add badges with heading tags h1……h6. Use the .badge class together with a contextual class (like .badge-secondary) within elements to create rectangular badges.

Bootstrap 4 Badges On Heading Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Badges Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Bootstrap 4 Badges Example</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>

Try it:

Bootstrap 4 Badges Example on jsbin.com

Bootstrap 4 Tutorial

Bootstrap 4 package tutorial.
Bootstrap 4 CDN link tutorial.
Create First Web Page With Bootstrap 4.
Bootstrap 4 Grid System.
Bootstrap 4 grid equal columns example.
Bootstrap 4 grid responsive equal columns.
Bootstrap 4 grid responsive unequal columns.
Bootstrap 4 Jumbotron tutorial.
Bootstrap 4 Full Width Tutorial.
Bootstrap 4 Page Header Tutorial.
Bootstrap 4 Well tutorial.
Bootstrap 4 Alert Tutorial.
Bootstrap 4 Alert Link Tutorial.
Bootstrap 4 Closing Alerts tutorial.
Bootstrap 4 Animated Alerts.
Bootstrap 4 Buttons Style.
Bootstrap 4 Buttons Outline Tutorial.
Bootstrap 4 Buttons Size Tutorial.
Bootstrap 4 Block Level Buttons tutorial.
Bootstrap 4 Buttons States Tutorial.
Bootstrap 4 Button Groups Tutorial.
Bootstrap 4 Vertical Button Groups.
Bootstrap 4 Justified Button Groups.
Bootstrap 4 Nesting Button Groups.
Bootstrap 4 Split Button Dropdowns.
Bootstrap 4 Badges Tutorial.
Bootstrap 4 Basic Progress Bar.
Bootstrap 4 Progress Bar Height.
Bootstrap 4 Progress Bar With Label.
Bootstrap 4 Colored Progress Bars.
Bootstrap 4 Striped Progress Bars.
Bootstrap 4 Animated Progress Bars.
Bootstrap 4 Stacked Progress Bars.
Bootstrap 4 Pagination Tutorial.
Bootstrap 4 Pagination – Active State.
Bootstrap 4 Pagination – Disabled State.
Bootstrap 4 Pagination – Sizing.
Bootstrap 4 Pagination Breadcrumbs.
Bootstrap 4 List Groups Tutorial.
Bootstrap 4 List Group With Linked Items.
Bootstrap 4 Active Item in a List Group.
Bootstrap 4 Disabled Item in a List Group.
Bootstrap 4 Group Contextual Classes.
Bootstrap 4 Basic Panel Tutorial.
Bootstrap 4 Panel Heading Tutorial.
Bootstrap 4 Panel Footer Tutorial.
Bootstrap 4 Cards Tutorial.
Bootstrap 4 Contextual Cards.
Bootstrap 4 Card Titles, Text and Links.
Bootstrap Card Image Tutorial.
Bootstrap Card Image Overlay.
Bootstrap 4 Dropdowns Tutorial.
Bootstrap 4 Dropdowns Divider tutorial.
Bootstrap 4 Dropdowns Header Tutorial.
Bootstrap 4 Dropdowns Active Items.
Bootstrap 4 Dropdowns Disabled Items.
Bootstrap 4 Dropdowns Position Tutorial.
Bootstrap 4 Dropup Tutorial.
Bootstrap 4 Simple Collapsible.
Bootstrap 4 Collapsible Panel Tutorial.
Bootstrap Collapsible List Tutorial.
Bootstrap 4 Stacked Form Tutorial.
Bootstrap 4 Inline Form Tutorial.
Sign Up/ Sign In
Ask a Question


Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at hr@codesjava.com.

Development

We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on hr@codesjava.com.

Copyright © 2018 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki