Bootstrap Alert


Prev Tutorial Next Tutorial

Alert class in Bootstrap

Bootstrap Alerts are used to provide an easy way to create predefined alert messages. Alert adds a style to your messages to make it more appealing to the users.
There are four classes that are used within

element for alerts.

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

Bootstrap Alert Example

<!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="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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
</head>  
<body>  
  
<div class="container">  
  <div class="alert alert-success">  
    <strong>Success!</strong> Well done its submitted.  
  </div>  
  <div class="alert alert-info">  
    <strong>Info!</strong> take this info.  
  </div>  
  <div class="alert alert-warning">  
    <strong>Warning!</strong> Dont submit this.  
  </div>  
  <div class="alert alert-danger">  
    <strong>Danger!</strong> Change few things.  
</div>  
</div>  
  
</body>  
</html> 

Output

Success! Well done its submitted.
Info! take this info.
Warning! Dont submit this.
Danger! Change few things.

Prev Tutorial Next Tutorial

Google Advertisements

Download Projects

Google Adsense Advertisements

Buy 3 Year Old Domain, Tutorialday.com, SeosmoTools.com @$200

Buy This Ad Space @$50 per Month, Ad Size 300X250 Contact on: hitesh.xc@gmail.com WhatsApp no. 8882538826

Yahoo Advertisements