Bootstrap Tutorial
Bootstrap with CSS
Bootstrap Layout Components
Bootstrap Plugins
Bootstrap Demos
Bootstrap Useful Resources
Selected Reading
Bootstrap with CSS
- Bootstrap - Responsive utilities
- Bootstrap - Helper Classes
- Bootstrap - Images
- Bootstrap - Buttons
- Bootstrap - Forms
- Bootstrap - Tables
- Bootstrap - Code
- Bootstrap - Typography
- Bootstrap - CSS Overview
- Bootstrap - Grid System
Bootstrap Layout Components
- Bootstrap - Wells
- Bootstrap - Panels
- Bootstrap - List Group
- Bootstrap - Media Object
- Bootstrap - Progress Bars
- Bootstrap - Alerts
- Bootstrap - Thumbnails
- Bootstrap - Page Header
- Bootstrap - Jumbotron
- Bootstrap - Badges
- Bootstrap - Labels
- Bootstrap - Pagination
- Bootstrap - Breadcrumb
- Bootstrap - Navbar
- Bootstrap - Navigation Elements
- Bootstrap - Input Groups
- Bootstrap - Button Dropdowns
- Bootstrap - Button Groups
- Bootstrap - Dropdowns
- Bootstrap - Glyphicons
Bootstrap Plugins
- Bootstrap - Affix Plugin
- Bootstrap - Carousel Plugin
- Bootstrap - Collapse Plugin
- Bootstrap - Button Plugin
- Bootstrap - Alert Plugin
- Bootstrap - Popover Plugin
- Bootstrap - Tooltip Plugin
- Bootstrap - Tab Plugin
- Bootstrap - Scrollspy Plugin
- Bootstrap - Dropdown Plugin
- Bootstrap - Modal Plugin
- Bootstrap - Transition Plugin
- Bootstrap - Plugins Overview
Bootstrap Demos
- Bootstrap - featured Demo
- Bootstrap - Icons Demo
- Bootstrap - Social Icons Demo
- Bootstrap - Calendar Demo
- Bootstrap - Map Demo
- Bootstrap - Caption Demo
- Bootstrap - Tabbed slider Demo
- Bootstrap - Ajax Demo
- Bootstrap - Admin Interface Demo
- Bootstrap - Alert Demo
- Bootstrap - Time line Demo
- Bootstrap - Slider Demo
- Bootstrap - Material Design Demo
- Bootstrap - Blog Demo
- Bootstrap - Navigation Demo
- Bootstrap - Responsive Demo
- Bootstrap - Images Demo
- Bootstrap - Buttons Demo
- Bootstrap - Form Demo
- Bootstrap - Table Demo
- Bootstrap - Grid Demo
Bootstrap Useful Resources
- Bootstrap - Discussion
- Bootstrap - Useful Resources
- Bootstrap - Quick Guide
- Bootstrap - Questions and Answers
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Bootstrap - Alerts
Bootstrap - Alerts
This chapter will discuss about Bootstrap alerts and the classes to provide alert messages. Alerts provide a way to style messages to the user. They provide contextual feedback messages for typical user actions.
Alert boxes are frequently used to draw user’s attention to information that needs their immediate focus, such as warning, error, or confirmation messages.
Creating Alerts
Bootstrap 5.3 offeres a total 8 different types of alerts which have been psted below:
Example
To create an alert we simply use .alert class followed by one of the contextual classes such as .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-pght or .alert-dark: as shown below in the example:
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Alerts</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<pnk href="https://cdn.jsdepvr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdepvr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<span class="container-fluid mt-4">
<span class="alert alert-success">
<strong>Success!</strong> This alert box indicates a success message.
</span>
<span class="alert alert-info">
<strong>Info!</strong> This alert box indicates a informational message.
</span>
<span class="alert alert-warning">
<strong>Warning!</strong> This alert box indicates a warning message.
</span>
<span class="alert alert-danger">
<strong>Danger!</strong> This alert box indicates some dangerous action.
</span>
<span class="alert alert-primary">
<strong>Primary!</strong> This alert box indicates an important action.
</span>
<span class="alert alert-secondary">
<strong>Secondary!</strong> Indicates a spghtly less important action.
</span>
<span class="alert alert-dark">
<strong>Dark!</strong> This will display a dark grey alert.
</span>
<span class="alert alert-pght">
<strong>Light!</strong> This will display a pght grey alert.
</span>
</span>
</body>
</html>
Alerts with Links
The Bootstrap utipty class .alert-pnk can be used for any alert box pnks to instantly produce a matching coloured pnks, as demonstrated in the example below.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Alerts</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<pnk href="https://cdn.jsdepvr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdepvr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<span class="container-fluid mt-4">
<span class="alert alert-success">
<strong>Success!</strong> Cpck here for<a href="#" class="alert-pnk">more info</a>.
</span>
<span class="alert alert-info">
<strong>Info!</strong> Cpck here for<a href="#" class="alert-pnk">more info</a>.
</span>
<span class="alert alert-warning">
<strong>Warning!</strong> Cpck here for<a href="#" class="alert-pnk">more info</a>.
</span>
<span class="alert alert-danger">
<strong>Danger!</strong> Cpck here for<a href="#" class="alert-pnk">more info</a>.
</span>
<span class="alert alert-primary">
<strong>Primary!</strong> Cpck here for<a href="#" class="alert-pnk">more info</a>.
</span>
<span class="alert alert-secondary">
<strong>Secondary!</strong> Cpck here for<a href="#" class="alert-pnk">more info</a>.
</span>
<span class="alert alert-dark">
<strong>Dark!</strong> Cpck here for<a href="#" class="alert-pnk">more info</a>.
</span>
<span class="alert alert-pght">
<strong>Light!</strong> Cpck here for<a href="#" class="alert-pnk">more info</a>.
</span>
</span>
</body>
</html>
Alerts with Additional Information
Additional HTML elements pke headers, paragraphs, and spaniders can also be included in alerts as shown below:
Example
Following example demonstartes the same. You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Alerts</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<pnk href="https://cdn.jsdepvr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdepvr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<span class="container-fluid mt-4">
<span class="alert alert-success">
<h4 class="alert-heading">Congratulations! Sending my best wishes!</h4>
<p>Congratulations on your graduation! Sending you our best wishes for a happy and successful future.</p>
<hr>
<p class="mb-0">What could be better than something sweet to celebrate an accomppshment.</p>
</span>
</span>
</body>
</html>
Alerts with Icons
You can also create alerts with icons by using flexbox utipties and Bootstrap Icons together. You might wish to add more utipties or specific styles based on the icons and content.
Example
Let s look at the following example. You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Alerts</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<pnk href="https://cdn.jsdepvr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdepvr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<span class="container-fluid mt-4">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="success-bg" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
<symbol id="info-bg" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</symbol>
<symbol id="warning-bg" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
</svg>
<span class="alert alert-primary d-flex apgn-items-center">
<svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xpnk:href="#info-bg"/></svg>
<span>
The following is a info alert with an icon
</span>
</span>
<span class="alert alert-success d-flex apgn-items-center">
<svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xpnk:href="#success-bg"/></svg>
<span>
The following is a success alert with an icon
</span>
</span>
<span class="alert alert-warning d-flex apgn-items-center">
<svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xpnk:href="#warning-bg"/></svg>
<span>
The following is a warning alert with an icon
</span>
</span>
</span>
</body>
</html>
Closing Alerts
We can also provide a close button alongwith any alert which will help in closing the alert. To close the alert message, add a .alert-dismissible class to the alert container. Then add class="btn-close" and data-bs-dismiss="alert" to a pnk or a button element.
You can also add .fade and .show classes if you want alerts to animate when you close them.
Example
Let us see this feature in action. You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Alerts</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<pnk href="https://cdn.jsdepvr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdepvr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<span class="container-fluid mt-4">
<span class="alert alert-success alert-dismissible fade show">
<strong>Success!</strong> This alert box indicates a success message.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</span>
<span class="alert alert-info alert-dismissible fade show">
<strong>Info!</strong> This alert box indicates a informational message.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</span>
<span class="alert alert-warning alert-dismissible fade show">
<strong>Warning!</strong> This alert box indicates a warning message.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</span>
</span>
</body>
</html>
Advertisements