This tutorial explains how to use Bootstrap Icons, Badges and Alerts. We have covered basic alert, alert styles, alert links, alerts with additional HTML elements, closing alerts, basic badge, badge styles, pill badges, actionable badges, badge inside a button, and various icons:
Please note that we have used Bootstrap version 4 in all examples.
=> Check ALL Bootstrap Tutorials Here
Table of Contents:
Bootstrap Alert
Basic Alert
Alerts are a very useful way of sending feedback messages to users. They are usually used as Bootstrap popup alerts. Add the .alert class and one of the contextual classes (.alert-*) to create a Bootstrap alert.
The table below summarizes the classes of Bootstrap alerts.
| Class | Usage |
|---|---|
| .alert | This class is used to create an alert. |
| .alert-primary | This class is used to add blue color to an alert. |
| .alert-secondary | This class is used to add grey color to an alert. |
| .alert-success | This class is used to add green color to an alert. |
| .alert-danger | This class is used to add red color to an alert. |
| .alert-warning | This class is used to add orange color to an alert. |
| .alert-info | This class is used to add a light blue color to an alert. |
| .alert-light | This class is used to add a light grey color to an alert. |
| .alert-dark | This class is used to add a dark grey color to an alert. |
| .alert-link | This class is used to create an alert link. |
| .alert-dismissible | This class is used to close an alert. |
Bootstrap Classes For Alert Styles
Use the following contextual classes for alerts. It will add a wide range of colors to the alerts.
- .alert-primary: This class is used to add a blue color to an alert.
- .alert-secondary: This class is used to add grey color to an alert.
- .alert-success: This class is used to add green color to an alert.
- .alert-danger: This class is used to add red color to an alert.
- .alert-warning: This class is used to add orange color to an alert.
- .alert-info: This class is used to add a light blue color to an alert.
- .alert-light: This class is used to add a light grey color to an alert.
- .alert-dark: This class is used to add a dark grey color to an alert.
Example of alerts with contextual classes
The below programming code shows an example of alerts with contextual classes. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="alert alert-primary">Primary Alert</div> <div class="alert alert-secondary">Secondary Alert</div> <div class="alert alert-success"> Success Alert</div> <div class="alert alert-danger">Danger Alert</div> <div class="alert alert-warning">Warning Alert</div> <div class="alert alert-info">Info Alert</div> <div class="alert alert-light">Light Alert</div> <div class="alert alert-dark">Dark Alert</div> </div> </body> </html>
Browser output of the above programming code.
Alert Links, Alerts With Additional HTML Elements And Closing Alerts
Alert Links
An alert may contain a link(s). Add the .alert-link class and <a> to create an alert link. Please refer to the below example of an alert link.
Alerts With Additional HTML Elements
Alerts may contain additional HTML elements. Please refer to the below example of an alert with additional HTML elements.
Closing Alerts
An alert may contain a closing icon too. Add the .alert-dismissible class for closing an alert. Please refer to the below example of a closing alert.
Note: You need to link Bootstrap JavaScript into your project for closing alerts.
Animated Alerts
Add the .fade class and the .show class to create an animated alert that gives a fading effect while closing the alert. Please refer to the below example of an animated alert.
Example of an Alert Link, an Alert with Additional HTML Elements, a Closing Alert, and an Animated Alert
The below programming code shows examples of an alert link, an alert with additional HTML elements, an alert closing and an animated alert. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <!-- an alert with a link --> <div class="alert alert-primary" role="alert"> This is an alert with <a href="#" class="alert-link">an example link</a>. </div> <!-- an alert with additional HTML elements --> <div class="alert alert-success"> <h3 class="alert-heading">Great job!</h3> <p>This is an alert with additional HTML elements.</p> <hr> <p class="mb-0">Keep in practice.</p> </div> <!-- closing an alert --> <div class="alert alert-info alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> Click on "x" to close this alert. </div> <!-- an animated alert --> <div class="alert alert-info alert-dismissible fade show"> <button type="button" class="close" data-dismiss="alert">×</button> Click on "x" to close this alert. </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Browser output of the above programming code.
Bootstrap Badge
Basic Badge
Add the .badge class and one of the contextual classes (.badge-*) to create a Bootstrap badge.
The below table summarizes the classes of Bootstrap badges.
| Class | Usage |
|---|---|
| .badge | This class is used to create a badge. |
| .badge-pill | This class is used to make a badge more rounded. |
| .badge-primary | This class is used to add blue color to a badge. |
| .badge-secondary | This class is used to add grey color to a badge. |
| .badge-success | This class is used to add green color to a badge. |
| .badge-danger | This class is used to add red color to a badge. |
| .badge-warning | This class is used to add orange color to a badge. |
| .badge-info | This class is used to add a light blue color to a badge. |
| .badge-light | This class is used to add a light grey color to a badge. |
| .badge-dark | This class is used to add a dark grey color to a badge. |
Bootstrap Classes For Badge Styles
Use the following contextual classes for badges. It will add a wide range of colors to the badges.
- .badge-primary: This class is used to add a blue color to a badge.
- .badge-secondary: This class is used to add grey color to a badge.
- .badge-success: This class is used to add green color to a badge.
- .badge-danger: This class is used to add red color to a badge.
- .badge-warning: This class is used to add orange color to a badge.
- .badge-info: This class is used to add a light blue color to a badge.
- .badge-light: This class is used to add a light grey color to a badge.
- .badge-dark: This class is used to add a dark grey color to a badge.
Example of badges with contextual classes
The below programming code shows an example of badges with contextual classes. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="badge badge-primary">Primary Badge</div> <div class="badge badge-secondary">Secondary Badge</div> <div class="badge badge-success">Success Badge</div> <div class="badge badge-danger">Danger Badge</div> <div class="badge badge-warning">Warning Badge</div> <div class="badge badge-info">Info Badge</div> <div class="badge badge-light">Light Badge</div> <div class="badge badge-dark">Dark Badge</div> </div> </body> </html>
Browser output of the above programming code.
Pill Badges, Actionable Badges And Badge Inside A Button
Pill Badges
The .badge-pill class makes a badge more rounded. Please refer to the below example of a pill badge.
Actionable Badges
Add the contextual .badge-* classes to a <a> to create an actionable badge. Please refer to the below example of an actionable badge.
Badge Inside A Button
A badge can be used inside a button. Add the .badge class and one of the contextual classes (.badge-*) to <span> inside a button element to create a badge inside a button. The badge can be used as a numerical indicator. Please refer to the below example of a badge inside a button.
Example of a Pill Badge, an Actionable Badge, and a Badge inside a Button
The below programming code shows examples of a pill badge, an actionable badge, and a badge inside a button. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <!—a pill badge--> <span class="badge badge-pill badge-primary">Pill Badge</span> <!-- an actionable badge --> <a href="#" class="badge badge-primary">Actionable Badge</a> <!—a badge inside a button --> <button type="button" class="btn btn-primary"> Messages <span class="badge badge-light">7</span> </button> </div> </body> </html>
Browser output of the above programming code.
Bootstrap 4 Icons
If you have worked with Bootstrap 3, then you might know about Bootstrap Glyphicons as it is the most commonly used icon set. However, Bootstrap 4 does not support Glyphicons, but still it supports a large number of other icon sets as given below.
- Bootstrap Icons
- Font Awesome
- Open Iconic
- Octicons
- Bytesize
- Google Material icons
- Ionicons
- Feather
- Dripicons
- Ikons
- Icons8
Bootstrap Icons Set
Recently, the Bootstrap team has introduced an icon set called Bootstrap Icons. It consists of more than 1,000 icons that are free and high quality.
Installation
You can install these icons into your project by following one of the below methods.
- Via npm
You can run the following command in the command prompt to install the icons via npm.
npm i bootstrap-icons
- Manual download
You can manually download the icon set from GitHub as all the releases are on GitHub.
Visit this URL for the relevant GitHub page.
Visit this URL to download the latest version (v1.2.1) of the icon set.
Icons With Colors
Use one of the following classes to add colors to the icons.
- .text-primary: This class is used to add a blue color to an icon.
- .text-secondary: This class is used to add grey color to an icon.
- .text-success: This class is used to add green color to an icon.
- .text-danger: This class is used to add red color to an icon.
- .text-warning: This class is used to add orange color to an icon.
- .text-info: This class is used to add a light blue color to an icon.
- .text-light: This class is used to add a light grey color to an icon.
- .text-dark: This class is used to add a dark grey color to an icon.
Example
The below programming code shows an example of a Bootstrap icon for the Bootstrap logo. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-bootstrap-fill text-primary" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M4.002 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4- 4V4a4 4 0 0 0-4-4h-8zm1.06 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v- .1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313- 4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762h1.898c1.184 0 1.81-.48 1.81-1.377 0-.885-.65-1.348-1.886-1.348H6.375v2.725z"/> </svg> </div> </body> </html>
Browser output of the above programming code.
Visit this URL for more information.
Font Awesome Icons
Font Awesome is one of the most famous icons set among developers. It is also one of the preferred icon sets by the Bootstrap team as they have already tested and used it.
It provides vector icons and social logos. Some icons are free while you have to pay for others. According to the Font Awesome website, there are 1,609 free icons and 7,865 pro icons.
You may refer to this URL to visit the official website of Font Awesome.
Iconic Icons
This is another preferred icon set by the Bootstrap team as they have already tested and used it.
Open Iconic is an open-source icon set that is available in the following formats.
- SVG
- PNG
- WebP
- EOT
- OTF
- TTF
- WOFF
You may refer to this URL to visit the official website of Iconic.
Octicons
This is also a preferred icon set by the Bootstrap team as they have already tested and used this icon set. The developer and the maintainer of Octicons is the GitHub Design Systems team.
You may refer to this URL to visit the official website of Octicons
Bytesize Icons
Bytesize icons are tiny style-controlled icons. There are 101 Bytesize icons available. You may refer to this URL to visit the official website of Bytesize.
Google Material Icons
Google Material icons provide a large set of icons that are categorized into the following categories. These icons are free to use for anyone and are licensed under the Apache license version 2.0.
- all
- action
- alert
- av
- communication
- content
- device
- editor
- file
- hardware
- home
- image
- maps
- navigation
- notification
- places
- social
- toggle
Google Material Icons come with five icon themes as shown below.
- filled
- outlined
- rounded
- two-tone
- sharp
You may refer to this URL to visit the official website of Google Material icons.
Ionicons
Ionicons provides open-source icons. Ionicons can be used for web, iOS, Android, and desktop application development. The Ionic Framework team is the developer of Ionicons. These icons are licensed under the MIT License.
There are three icon themes for Ionicons as shown below.
- outline
- filled
- sharp
You may refer to the URL to visit the official website of Ionicons.
Feather Icons
Feather is an open-source icon set that can be customized. It provides more than 250 icons. You may refer to this URL to visit the official website of Feather.
Dripicons
Dripicons is a free vector line-icon font. It is licensed under Creative Commons Attribution 4.0 International License and the font under SIL Open Font License. You may refer to this URL to visit the official website of Dripicons.
Ikons
All the icons of Ikons are royalty-free to use for personal and commercial purposes. It provides 300 free vector icons. The custom icons of Ikons are available in the following formats.
- SVG
- AI
- ESP
- PSD
- CSH
- PNG
You may refer to this URL to visit the official website of Ikons.
Icons8 Icons
Icons8 provides free icons with over 30 styles. Icons8 icons are free to use, but you should link to Icons8. Otherwise, you need to purchase. You may refer to this URL to visit the official website of icons8.
Frequently Asked Questions
In this section, we will look at some of the frequently asked questions about Bootstrap alerts, badges, and icons.
Q #1) What is the primary purpose of an alert?
Answer: The primary purpose of an alert is to send feedback messages to users.
Q #2) How to create an alert?
Answer: Add the .alert class and one of the contextual classes (.alert-*) to create an alert.
Q #3) Which contextual classes are used for alerts?
Answer: The contextual classes used for alerts are .alert-primary, .alert-secondary, .alert-success, .alert-danger, .alert-warning, .alert-info, .alert-light and .alert-dark.
Q #4) How can you create an alert link?
Answer: Add the .alert-link class to create an alert link.
Q #5) How to close or dismiss an alert?
Answer: Add the .alert-dismissible class to close or dismiss an alert.
Q #6) How to create a badge?
Answer: Add the .badge class and one of the contextual classes (.badge-*) to create a badge.
Q #7) What are the contextual classes used to add colors to badges?
Answer: The contextual classes used for badges are .badge-primary, .badge-secondary, .badge-success, .badge-danger, .badge-warning, .badge-info, .badge-light and .badge-dark.
Q #8) Which class is used to create a pill badge?
Answer: The .badge-pill class is used to create a pill badge.
Q #9) Which class is used to create actionable badges?
Answer: The contextual .badge-* classes are used to create actionable badges.
Q #10) How can you create a badge inside a button?
Answer: Add the .badge class and one of the contextual classes (.badge-*) to <span> inside a button element to create a badge inside a button.
Q #11) Which utility classes are used to add colors to the Bootstrap icons?
Answer: The color utility classes include .text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light and .text-dark.
Q #12) Name a few icon sets supported by Bootstrap 4.
Answer: It supports Font Awesome, Open Iconic, Octicons, Bytesize, Google Material icons, Ionicons, Feather, Dripicons, Ikons and Icons8.
Conclusion
Bootstrap 4 uses a wide range of classes for styling alerts and badges, and it also provides a beautiful icon set.
In our upcoming tutorial, we will discuss the Bootstrap 4 buttons and button groups.
=> Visit Here For The Exclusive Bootstrap Training Series