×

Html & Html5

Introduction to Html

Component of Html

HTML Advance

HTML Advance

Html Form

Html5 basics

Html5 Grid

Html5 Graphics

Html5 Media

Html5 APIs

it training classes Logo

The World's best Software Development Study Portal

Bootstrap5

Introduction to Bootstrap5

Component of Bootstrap


Bootstrap Alert


If we want to give any alert message to our user , so from bootstrap it is very easy to create alert messages . There are some predefined class. And we use .alert class for it
Let’s understand them by this program :-


<!DOCTYPE html>

<html lang="en">

<head>

<title>bootstrap 5 Example</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container-fluid">

<h2> Alerts</h2>

<p> Alerts are created with the .alert class, followed by a contextual color classes:</p>

<div class="alert alert-success">
<strong> Success!</strong> This alert box could indicate a successful or positive action.
</div>

<div class="alert alert-info">
<strong> Info</strong> This alert box could indicate a neutral informative change or action.
</div>

<div class="alert alert-warning">
<strong> Warning!</strong> This alert box could indicate a warning that might need attention.
</div>

<div class="alert alert-danger">
<strong> Danger!</strong> This alert box could indicate a dangerous negative action.
</div>

<div class="alert alert-primary">
<strong> Primary!</strong> Indicates an important action.
</div>

<div class="alert alert-secondary">
<strong> Secondary!</strong> Indicates a slightly less important action.
</div>

<div class="alert alert-dark">
<strong> Dark!</strong> Dark grey alert.
</div>

<div class="alert alert-light">
<strong> Light!</strong> Light grey alert.
</div>

</div>

</body>

</html>

Output of this Program


bootstrap 5 Example

Alerts

Alerts are created with the .alert class, followed by a contextual color classes:

Success! This alert box could indicate a successful or positive action.
Info This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous negative action.
Primary! Indicates an important action.
Secondary! Indicates a slightly less important action.
Dark! Dark grey alert.
Light! Light grey alert.



So here we get our alert messages.



Alert Links

<!DOCTYPE html>

<html lang="en">

<head>

<title>bootstrap 5 Example</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container-fluid">

<h2> Alerts</h2>

<p> Alerts are created with the .alert class, followed by a contextual color classes:</p>

<div class="alert alert-success">
<strong> Success!</strong> This alert box could indicate a successful or <a href="#" class="alert-link">positive action.</a>
</div>

<div class="alert alert-info">
<strong> Info</strong> This alert box could indicate a neutral informative <a href="#" class="alert-link">change or action.</a>
</div>

<div class="alert alert-warning">
<strong> Warning!</strong> This alert box could indicate a warning that might <a href="#" class="alert-link">need attention.</a>
</div>

<div class="alert alert-danger">
<strong> Danger!</strong> This alert box could indicate a dangerous <a href="#" class="alert-link">negative action.</a>
</div>

<div class="alert alert-primary">
<strong> Primary!</strong> Indicates an <a href="#" class="alert-link">important action.</a>
</div>

<div class="alert alert-secondary">
<strong> Secondary!</strong> Indicates a slightly less <a href="#" class="alert-link">important action.</a>
</div>

<div class="alert alert-dark">
<strong> Dark!</strong> <a href="#" class="alert-link">Dark grey alert.</a>
</div>

<div class="alert alert-light">
<strong> Light!</strong> <a href="#" class="alert-link">Light grey alert.</a>
</div>

</div>

</div>

</body>

</html>

Output of this Program


bootstrap 5 Example

Alerts

Alerts are created with the .alert class, followed by a contextual color classes:

Success! This alert box could indicate a successful or positive action.
Info This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous negative action.
Primary! Indicates an important action.
Secondary! Indicates a slightly less important action.
Dark! Dark grey alert.
Light! Light grey alert.



Closing Alerts

<html lang="en">

<head>

<title>Bootstrap Example</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container mt-3">

<h2>Alerts</h2>

<p>The button with class="btn-close" and data-bs-dismiss="alert" is used to close the alert box.</p>

<p>The alert-dismissible class aligns the button to the right.</p>

<div class="alert alert-success alert-dismissible">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Success!</strong> This alert box could indicate a successful or positive action. </div>

<div class="alert alert-info alert-dismissible">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Info!</strong> This alert box could indicate a neutral informative change or action. </div>

<div class="alert alert-warning alert-dismissible"> <button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Warning!</strong>This alert box could indicate a warning that might need attention. </div>

<div class="alert alert-danger alert-dismissible"> <button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Danger!</strong>This alert box could indicate a dangerous or potentially negative action. </div>

<div class="alert alert-primary alert-dismissible"> <button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Primary!</strong> Indicates an important action. </div>

<div class="alert alert-secondary alert-dismissible"> <button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Secondary!</strong>Indicates a slightly less important action. </div>

<div class="alert alert-dark alert-dismissible"> <button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Dark!</strong> Dark grey alert. </div>

<div class="alert alert-light alert-dismissible"> <button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Light!</strong>Light grey alert. </div>

</div>

</body>

</html>

Output of this Program


Bootstrap Example

Alerts

The button with class="btn-close" and data-bs-dismiss="alert" is used to close the alert box.

The alert-dismissible class aligns the button to the right.

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning!This alert box could indicate a warning that might need attention.
Danger!This alert box could indicate a dangerous or potentially negative action.
Primary! Indicates an important action.
Secondary!Indicates a slightly less important action.
Dark! Dark grey alert.
Light!Light grey alert.



Bootstrap 5 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute