Open In App

Bootstrap Badges, Labels, Page Headers

Last Updated : 04 Apr, 2023
Improve
Improve
Like Article
Like
Save
Share
Report
  1. Introduction and Installation
  2. Buttons, Glyphicons, Tables
  3. Vertical Forms, Horizontal Forms, Inline Forms
  4. DropDowns and Responsive Tabs
  5. Progress Bar and Jumbotron

Badges:

We all have seen some numerical indicators beside some links on various websites. These are called badges. These badges tell how many items are available or associated with the link. 
To add a badge to your webpage, add a class .badge to a span element like this,

HTML




<a href="#">
    Messages 
    <span class="badge">2</span>
</a>
<br>
<a href="#">
    Drafts 
    <span class="badge">3</span>
</a>
<br>
<a href="#">
    Comments 
    <span class="badge">4</span>
</a>


Output:


Badges inside buttons:
To insert badges inside buttons, add a class .badge to a button element like this.

HTML




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


Output:

Bootstrap Badges, Labels, Page Headers

Labels:
We all have seen some additional information besides some links on various websites. These are called labels. These labels tell additional information about the link or text. 
To add a label to your webpage, add a class .label to a span element like this- 

  1. Use the following classes to style the colour of the label 
    Grey – label-default 
    Green – label-success 
    Blue – label-info 
    Yellow –label-warning 
    Red – label-danger

HTML




<span class="label label-default">Grey Label</span>
<span class="label label-success">Green Label</span>
<span class="label label-info">Blue Label</span>
<span class="label label-warning">Yellow Label</span>
<span class="label label-danger">Red Label</span>


Bootstrap Badges, Labels, Page Headers

Panels:

We all have seen a box around some text or any information on various websites. These are called panels. These panels are bordered boxes with some padding which can be easily added around some text using bootstrap classes. 
The content we need to write inside the panel is written in a div element with a class .panel-body 
To add panels to your webpage, add a class .panel to a div element like this- 

  • Use the following classes to style the colour of the label 
    Grey – panel-default 
    Green – panel-success 
    Blue – panel-info 
    Yellow –panel-warning 
    Red – panel-danger

HTML




<div class="panel panel-default">
    <div class="panel-body">Panel</div>
</div>


Bootstrap Badges, Labels, Page Headers

Coloured Panels:

HTML




<div class="panel panel-default">
    <div class="panel-body">Panel</div>
</div>
<div class="panel panel-primary">
    <div class="panel-body">Panel</div>
</div>
<div class="panel panel-success">
    <div class="panel-body">Green Panel</div>
</div>
<div class="panel panel-info">
    <div class="panel-body">Blue Panel</div>
</div>
<div class="panel panel-warning">
    <div class="panel-body">Yellow Panel</div>
</div>
<div class="panel panel-danger">
    <div class="panel-body">Red Panel</div>
</div>


Output:

Bootstrap Badges, Labels, Page Headers

Page Header:
Page header allows us to write a heading on our webpage with proper spacing around it so that it can be distinguished from other text on the webpage. 
To add a pageheader to your webpage, add a class .page-header to a div element like this,

HTML




<div class="page-header">
    <h1>
        Hi !
    </h1>
</div>
  
<p>My name is Ayush.</p>


Output:

Bootstrap Badges, Labels, Page Headers

Note the difference if we don’t use page-header class.

Bootstrap Badges, Labels, Page Headers



Previous Article
Next Article

Similar Reads

Bootstrap 5 Badges Pill Badges
Bootstrap 5 Badges Pill badges can be made by using the rounded-pill class on the badge component. This is used to give the badges a rounded corner shape. Bootstrap 5 Badges Pill badge Class: rounded-pill: This class is used with the badge class to make badges pill-shaped. Syntax: &lt;span class="rounded-pill badge"&gt; ... &lt;/span&gt; Example 1:
2 min read
What are the labels and badges in Bootstrap ?
In this article, we will learn the Bootstrap labels and badges &amp; their implementation. Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. Bootstrap is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. Bootstrap uses different types of classes
5 min read
Spectre Labels Rounded labels
The Spectre Labels are formatted text tags for highlighting informative information. In this article, we will learn how to create rounded or pill-shaped labels. The default shape of the label is square. We can choose the color of the label by applying the color classes as we all know primary, success, error, etc. To change the color we have to use
2 min read
HTTP headers | Access-Control-Expose-Headers
The HTTP Access-Control-Expose-Headers header is a response header that is used to expose the headers that have been mentioned in it. By default 6 response headers are already exposed which are known as CORS-safelisted response headers. They are namely- Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma. Syntax: Access-Co
1 min read
HTTP headers | Access-Control-Allow-Headers.
The HTTP Access-Control-Allow-Headers header is a response-type header that is used to indicate the HTTP headers. It can be used during a request and is used in response to a CORS preflight request, that checks to see if the CORS protocol is understood and a server is aware using specific methods and headers, which includes the Access-Control-Reque
1 min read
HTTP headers | Access-Control-Request-Headers
Access-Control-Request-Headers is a request-type header used by browsers that contains information about the different HTTP headers that will be sent by the client in the ensuing request. Whenever a client initiates a request to a server, the browser checks if the request needs a CORS preflight or not. In case a CORS preflight request is required,
2 min read
Bootstrap | Badges and Breadcrumbs
Badges: Badges are numbers associated with the link to indicate the number of items associated with the link. The notification number is seen when logged in to a particular website and tells the numbers of news or notifications to see by clicking it. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;badge example&lt;/
4 min read
Bootstrap 4 | Badges
The .badge class is used to add additional information to the content. For example, some websites associate a number of notifications to the link. The notification number is seen when logged in to a particular website which tells the numbers of news or notifications to see by clicking it.Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html lang=
3 min read
Bootstrap 5 Badges Buttons
Bootstrap 5 comes with a Badges component which shows the additional, latest information and labels to any element. Along with the normal sentences, Badges can be implemented inside the button element also, to show any link or notification counter. In this article, we will see the use of Badges on Buttons by using the badges class on Buttons. Prere
2 min read
What is badges in Bootstrap ?
Introduction: In Bootstrap v5, Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that they have more rounded corners. Badges scale to match the size of the immediate parent e
4 min read