Home >>Bootstrap Tutorial >Bootstrap Alerts

Bootstrap Alerts

Bootstrap Alerts are used to see certain alerts on some websites. Alert adds a style to your messages to make it more highlighted to the users. It is used to create predefined alert messages in an easy way.

To display the alert message on website by using the .alert class followed by some contextual predefined classes.

The Alert classes are:

alert-success
alert-info
alert-warning
alert-danger
alert-primary
alert-secondary
alert-light
alert-dark

Let's take an Example:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap Alert</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> 
</head>  
<body> 
	 <div class="container">		 
		<div class="alert alert-success"> 
			<strong>Success alert!</strong> 
		</div> 
		<div class="alert alert-warning"> 
			<strong>Warning alert!</strong> 
		</div> 
		<div class="alert alert-info"> 
			<strong>Info alert!</strong> 
		</div> 
		<div class="alert alert-danger"> 
			<strong>Danger alert!</strong> 
		</div> 
		<div class="alert alert-secondary"> 
			<strong>Secondary alert!</strong> 
		</div> 
		<div class="alert alert-primary"> 
			<strong>primary alert!</strong> 
		</div> 
		<div class="alert alert-light"> 
			<strong>Light alert!</strong> 
		</div> 
		<div class="alert alert-dark"> 
			<strong>Dark alert!</strong> 
		</div> 
	</div> 
</body>   
</html>

Output:

Success alert!

Warning alert!

Info alert!

Danger alert!

Secondary alert!

primary alert!

Light alert!

Dark alert!

Alert Links

If you want "matching colored links" in your text then you have to add the alert-link class to any links inside the alert box

Let's take an Example of Alert Links

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Alert Links</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <div class="alert alert-success">
    <strong>Success!</strong> Welcome to <a href="#" class="alert-link"> phptpoint</a>.
  </div>
   <div class="alert alert-secondary">
    <strong>Secondary!</strong> Welcome to <a href="#" class="alert-link"> phptpoint</a>.
  </div>
  <div class="alert alert-info">
    <strong>Info!</strong> Welcome to <a href="#" class="alert-link"> phptpoint</a>.
  </div>
  <div class="alert alert-warning">
    <strong>Warning!</strong> Welcome to <a href="#" class="alert-link"> phptpoint</a>.
  </div>
    <div class="alert alert-primary">
    <strong>Primary!</strong> Welcome to <a href="#" class="alert-link"> phptpoint</a>.
  </div>
  <div class="alert alert-danger">
    <strong>Danger!</strong> Welcome to <a href="#" class="alert-link"> phptpoint</a>.
  </div>
  <div class="alert alert-dark">
    <strong>Dark!</strong> Welcome to <a href="#" class="alert-link"> phptpoint</a>.
  </div>
  <div class="alert alert-light">
    <strong>Light!</strong> Welcome to <a href="#" class="alert-link"> phptpoint</a>.
  </div>
</div>
</body>
</html>

Output:

Success! Welcome to phptpoint.

Secondary! Welcome to phptpoint.

Info! Welcome to phptpoint.

Warning! Welcome to phptpoint.

Primary! Welcome to phptpoint.

Danger! Welcome to phptpoint.

Dark! Welcome to phptpoint.

Light! Welcome to phptpoint.

Animated Alerts

You can use the fade and .show classes to add the fading effect of animation when closing the alert message.

Let's take an Example of Animated Alert:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <div class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Success!</strong> Success Alert.
  </div>
  <div class="alert alert-info alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Info!</strong> Info Alert.
  </div>
    <div class="alert alert-dark alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Dark!</strong> Dark grey alert.
  </div>
  <div class="alert alert-warning alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Warning!</strong> Warning Alert.
  </div>
    <div class="alert alert-secondary alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Secondary!</strong> Secondary Alert..
  </div>
  <div class="alert alert-danger alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Danger!</strong> Danger Alert.
  </div>
  <div class="alert alert-primary alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Primary!</strong> Primary Alert.
  </div>
  <div class="alert alert-light alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Light!</strong> Light grey alert.
  </div>
</div>
</body>
</html>

Output:

Success! Success Alert.

Info! Info Alert.

Dark! Dark grey alert.

Warning! Warning Alert.

Secondary! Secondary Alert..

Danger! Danger Alert.

Primary! Primary Alert.

Light! Light grey alert.

« Previous Next »

Bootstrap Tutorial Bootstrap Introduction Bootstrap Example Bootstrap Container Bootstrap Jumbotron Bootstrap Grid System Bootstrap Alerts Bootstrap Typography Bootstrap Table Bootstrap Colors Bootstrap Forms Bootstrap Images Bootstrap Buttons Bootstrap Button Group Bootstrap Progress Bars Bootstrap Badges Bootstrap Pagination Bootstrap Cards Bootstrap Navs Bootstrap Fixed Navigation Bar Bootstrap Navigation Bar Bootstrap Collapse Bootstrap Carousel Bootstrap Modal Bootstrap Input Groups Bootstrap List Groups Bootstrap Tooltip Bootstrap Popover Bootstrap Flex Bootstrap Utilities Bootstrap Media Objects

Bootstrap Interview Questions

No Sidebar ads