Bootstrap4 Information prompt box

Bootstrap 4 It can easily realize the information prompt box.

The prompt box can use the .alert class, followed by .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark class to achieve:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">/script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2Prompt box</h2>
　　<p>The prompt box can use the .alert class, followed by a specific meaning color class to achieve:</p>
　　<div class="alert alert-success">
　　　　<strong>Success!/strong> Specify the successful operation prompt information.
　　</div>
　　<div class="alert alert-info">
　　　　<strong>Information!/strong> Please note this information.
　　</div>
　　<div class="alert alert-warning">
　　　　<strong>Warning!/strong> Set the warning information.
　　</div>
　　<div class="alert alert-danger">
　　　　strong>Error!</strong>/You should read carefully <strong>　Failed operation
　　</div>
　　<div class="alert alert-primary">
　　　　strong>Preferred!</strong>/strong>This is an important operation information.
　　</div>
　　<div class="alert alert-secondary">
　　　　strong>Secondary!</strong>/strong>Display some unimportant information.
　　</div>
　　<div class="alert alert-dark">
　　　　<strong>Dark grey!</strong>/strong>Dark grey alert box.
　　</div>
　　<div class="alert alert-light">
　　　　<strong>Light grey!</strong>/strong>Light grey alert box.
　　</div>
</div>
</body>
</html>

Test to see ‹/›

Add link to prompt box

Add alert class to the link tag in the prompt box：-link class to set the link color of the prompt box：

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">/script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2Add link to prompt box</h2>
　　<p>Add the alert class to the link tag in the prompt box：-link class to set the link color of the prompt box：</p>
　　<div class="alert alert-success">
　　　　<strong>Success!/You should read carefully <a href="#" class="alert-link>This information</a>.
　　</div>
　　<div class="alert alert-info">
　　　　<strong>Information!/You should read carefully <a href="#" class="alert-link>This information</a>.
　　</div>
　　<div class="alert alert-warning">
　　　　<strong>Warning!/You should read carefully <a href="#" class="alert-link>This information</a>.
　　</div>
　　<div class="alert alert-danger">
　　　　strong>Error!</strong>/You should read carefully <a href="#" class="alert-link>This information</a>.
　　</div>
　　<div class="alert alert-primary">
　　　　strong>Preferred!</strong>/You should read carefully <a href="#" class="alert-link>This information</a>.
　　</div>
　　<div class="alert alert-secondary">
　　　　strong>Secondary!</strong>/You should read carefully <a href="#" class="alert-link>This information</a>.
　　</div>
　　<div class="alert alert-dark">
　　　　<strong>Dark grey!</strong>/You should read carefully <a href="#" class="alert-link>This information</a>.
　　</div>
　　<div class="alert alert-light">
　　　　Grey!/You should read carefully <a href="#" class="alert-link>This information</a>.
　　</div>
</div>
</body>
</html>

Test to see ‹/›

Close the alert box

We can add .alert to the div inside the alert box-dismissible class, and then add and data-dismiss="alert" class to set the close operation of the alert box.

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/script>
　　<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js">/script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>Close the alert box</h2>
　　<p>We can add .alert to the div inside the alert box-dismissible class, and then add class="close" and data-Use the dismiss="alert" class to set the close operation of the alert box.</p>
　　<div class="alert alert-success alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Success!/strong> Specify the successful operation prompt information.
　　</div>
　　<div class="alert alert-info alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Information!/strong> Please note this information.
　　</div>
　　<div class="alert alert-warning alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Warning!/strong> Set the warning information.
　　</div>
　　<div class="alert alert-danger alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　strong>Error!</strong>/strong>Operation failed.
　　</div>
　　<div class="alert alert-primary alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　strong>Preferred!</strong>/strong>This is an important operation information.
　　</div>
　　<div class="alert alert-secondary alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　strong>Secondary!</strong>/strong>Display some unimportant information.
　　</div>
　　<div class="alert alert-dark alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Dark grey!</strong>/strong>Dark grey alert box.
　　</div>
　　<div class="alert alert-light alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Light grey!</strong>/strong>Light grey alert box.
　　</div>
</div>
</body>
</html>

Test to see ‹/›

Hint: × (×) is an HTML entity character used to represent the close operation, not the letter "x".

Alert box animation

.fade and .show classes are used to set the fade out and fade in effects of the alert box when it is closed:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/script>
　　<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js">/script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>Alert box animation</h2>
　　<p>.fade and .show classes are used to set the fade out and fade in effects of the alert box when it is closed:/p>
　　<div class="alert alert-success alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Success!/strong> Specify the successful operation prompt information.
　　</div>
　　<div class="alert alert-info alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Information!/strong> Please note this information.
　　</div>
　　<div class="alert alert-warning alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Warning!/strong> Set the warning information.
　　</div>
　　<div class="alert alert-danger alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　strong>Error!</strong>/strong>Operation failed.
　　</div>
　　<div class="alert alert-primary alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　strong>Preferred!</strong>/strong>This is an important operation information.
　　</div>
　　<div class="alert alert-secondary alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　strong>Secondary!</strong>/strong>Display some unimportant information.
　　</div>
　　<div class="alert alert-dark alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Dark grey!</strong>/strong>Dark grey alert box.
　　</div>
　　<div class="alert alert-light alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Light grey!</strong>/strong>Light grey alert box.
　　</div>
</div>
</body>
</html>

Test to see ‹/›

Bootstrap4 Button Bootstrap4 Jumbotron

Bootstrap4 Basic Tutorial

Bootstrap4 Information prompt box

Add link to prompt box

Close the alert box

Alert box animation