Bootstrap Alerts Example
Bootstrap Alerts:Bootstrap Alerts are user interface components that provide feedback to users based on their actions. A Simple Alert is a basic notification box with customizable content and styling. Dismiss Alerts Using Data Attributes allow users to close alerts by clicking an "X" button, enhancing user experience. Alerts with Icons include visual cues like icons to convey information effectively, making them more informative and engaging. These versatile Bootstrap features enhance web design by offering customizable, user-friendly alerts for better communication and user interaction.
Thanks for your feedback!
Your contributions will help us to improve service.
How can I create a simple alert using Bootstrap?
To create a basic alert using Bootstrap, include the Bootstrap CSS and JavaScript libraries in your HTML file. Then, use the <div>
element with the class "alert" and additional classes like "alert-success," "alert-warning," or "alert-danger" for different styles. Inside the div, place your message text. Example: <div class="alert alert-success">This is a success message.</div>
. This code generates a simple, styled alert conveying information to users. Customize the classes and content to display success, warning, or error messages based on your needs.
Bootstrap Simple Alert Example
<div class="container p-3 shadow-sm">
<h1>Bootstrap Simple Alert</h1>
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
</div>
Output of Bootstrap Simple Alert
How can data attributes be used to implement Bootstrap dismissable alerts?
Data attributes can implement Bootstrap dismissable alerts by assigning them to alert elements. For example, using "data-dismiss" with the value "alert" on a button or link allows it to close the associated alert when clicked. Data attributes like "data-bs-toggle" and "data-bs-dismiss" are used to control Bootstrap's alert functionality, enabling users to dismiss alerts interactively by clicking designated elements, enhancing user experience.
Bootstrap Dismiss Alerts Using Data Attributes
<div class="container p-3 shadow-sm">
<h1>Bootstrap Dismiss Alerts</h1>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Warning!</strong> This is Warning Dismiss Alerts..
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
<strong>Secondary!</strong> This is Secondary Dismiss Alerts..
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Success!</strong> This is Success Dismiss Alerts..
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<strong>Danger!</strong> This is Danger Dismiss Alerts..
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-dismissible fade show" role="alert">
<strong>Info!</strong> This is Info Dismiss Alerts..
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-light alert-dismissible fade show" role="alert">
<strong>Light!</strong> This is Light Dismiss Alerts..
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-dark alert-dismissible fade show" role="alert">
<strong>Dark</strong>This is Dark Dismiss Alerts..
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
Output of Bootstrap Dismiss Alerts Using Data Attributes
How can I create a Bootstrap alert with an icon?
To create Bootstrap alerts with icons, use the alert
and d-flex
classes for styling, and include an SVG icon along with your alert message. The icon is placed using the flex-shrink-0 me-2
classes. Each alert has a different color class like alert-primary
, alert-success
, alert-warning
, or alert-danger
to define its style. The SVG element contains the icon while the accompanying <div>
holds the alert message. This combination ensures that each alert displays an icon alongside its message. You can customize the icon and message content as needed for various types of alerts.
Bootstrap Alert with Icon
xxxxxxxxxx
<div class="container p-3 shadow-sm">
<h1>Bootstrap Alert with Icons</h1>
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Primary:">
<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" />
</svg>
<div>
Bootstap Primary Alert with Icon
</div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16"
class="bi bi-check-circle-fill flex-shrink-0 me-2" role="img" aria-label="Success:">
<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" />
</svg>
<div>
Bootstrap Success Alert with Icon
</div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16"
class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" role="img" aria-label="Warning:">
<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" />
</svg>
<div>
Bootstrap Warning Alert with Icon
</div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16"
class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" role="img" aria-label="Danger:">
<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" />
</svg>
<div>
An example danger alert with an icon
</div>
</div>
</div>