Bootstrap Alerts

In the following we will discuss about alerts and the classes Bootstrap provides for alerts. Alerts provide a way to style messages to the user. They provide contextual feedback messages for typical user actions.
We can add an optional close icon to alert. For inline dismissal use the Alerts jQuery plugin.We can add an basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).

Dismissal Alerts:

Add an basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger). Also add optional .alert-dismissable to the above <div> class.Add a close button.
Following example demonstrates this:

<!DOCTYPE html> 
<html lang="en"> 

<head> 
  <meta charset="utf-8" /> 
  <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
  <title>Try Bootstrap Online</title> 
  <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="/scripts/jquery.min.js"></script> 
  <script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 
 <h1>Try Bootstrap Online</h1> 
  <div class="alert alert-success alert-dismissable"> 
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> 
      × 
    </button> 
    Success! Well done its submitted. 
  </div> 
  <div class="alert alert-info alert-dismissable"> 
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> 
      × 
    </button> 
    Info! take this info. 
  </div> 
    <div class="alert alert-danger alert-dismissable"> 
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> 
      × 
    </button> 
    Error ! Change few things. 
  </div> 
  </body> 
</html> 

Links in Alerts:

Add an basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).Use the .alert-link utility class to quickly provide matching colored links within any alert.

Let us look through a set of codes combining the features in bootstrap alert.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8" /> 
  <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
  <title>Try Bootstrap Online</title> 
  <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="/scripts/jquery.min.js"></script> 
  <script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 
 <h1>Try Bootstrap Alert Online</h1> 
  <div class="alert alert-success alert-dismissable"> 
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> 
      × 
    </button> 
     <a href="#" class="alert-link">Success! Well done its submitted.</a> 
  </div> 
  <div class="alert alert-info alert-dismissable"> 
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> 
      × 
    </button> 
    <a href="#" class="alert-link"> Info! take this info.</a> 
  </div> 
  <div class="alert alert-danger alert-dismissable"> 
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> 
      × 
    </button> 
    <a href="#" class="alert-link"> Error ! Change few things.</a> 
  </div> 
  </body> 
</html> 

other useful links:
1>Bootstrap Grid System
2>Bootstrap Nav-bar
3>Working with scrollspy in bootstrap
4>Bootstrap list-group
5>Dropdown buttons in Bootstrap
6>Bootstrap Dropdown Menu
7>Bootstrap tables

Enter your email address: Delivered by FeedBurner

Leave a Reply

Your email address will not be published. Required fields are marked *