How to create custom simple info, success, danger, warning alert message on screen with alert message close cross button inside.

Bootstrap gives us 4 types of different classes to create completely custom alert messages boxes inside web pages with cross X button included. After clicking on X button it will finish the alert dialog. So here is the complete step by step tutorial for Create Alert message in HTML,PHP using Bootstrap classes with closing X button.

List of Alert classes:

.alert-info
alert-success
alert-danger
alert-warning

Adding X cross button to close selected Alert message.

<a href="#" class="close" data-dismiss="alert">&times;</a>

How to Create Alert message in HTML,PHP using Bootstrap classes with closing X button.

Code for alert.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Alert Messages</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>
<div class="container">

<div class="alert alert-info">
<a href="#" class="close" data-dismiss="alert">&times;</a>
 <strong>Important Note!</strong> Please read the privacy policy very carefully.
</div>

<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert">&times;</a>
 <strong>Comment Published!</strong> Dear User,Your comment is successfully published.
</div>

<div class="alert alert-danger">
<a href="#" class="close" data-dismiss="alert">&times;</a>
 <strong>Error Message!</strong> Please check your internet connection and try again.
</div>

<div class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">&times;</a>
 <strong>Warning!</strong> Please connect to private connection to secure your data.
</div>

</div>

</body>
</html>

Screenshot: