Bootstrap < Fundamentals 25 > Warning (Alerts)

Warning (Alerts) and the class provided by Bootstrap for warning. Warning (Alerts) provides a way for a user to define a message style. They provide contextual information feedback for typical user actions.

You can add an optional close button to the warning box. To create an inline, canceled warning box, use the warning (Alerts) jQuery plugin.

You can create a <div> by creating a . Alert class and four context class (that is, . alert-success,. Alert-info,. alert-warning,. Alert-danger), to add a basic warning box. The following example demonstrates this:

<! DOCTYPE html>
The results are as follows:
Can be canceled warning (dismissal Alerts)
To create a cancellation warning (dismissal alert), proceed as follows:

 
 

  
  
 
   
By creating a <div>, and adding a . Alert class and four context classes (that is, . alert-success,. Alert-info,. alert-warning,. Alert-danger), to add a basic warning box.
 
   
At the same time, add optional . alert-dismissableto the above <div> class.
 
   
Add a Close button.
 
  
 
 
The following example demonstrates this:
<! DOCTYPE html>Aria-hidden= "true" > &Times ; </button>Success! Good to complete the submission. </div><div class= "alert Alert-info alert-dismissable" > <button type= "button" class= "Close" data-dismiss= "Alert"Aria-hidden= "true" > &Times ; </button>Information! Please note this information. </div><div class= "alert alert-warning alert-dismissable" > <button type= "button" class= "Close" data-dismiss= "Alert"Aria-hidden= "true" > &Times ; </button>Warning! Please do not submit. </div><div class= "alert Alert-danger alert-dismissable" > <button type= "button" class= "Close" data-dismiss= "Alert"Aria-hidden= "true" > &Times ; </button>Error! Please make some changes. </div></body>

 
  

  
   

     Be sure to use the <button> element with the 
    data-dismiss= "alert" Data property. 
   
 
  
The results are as follows:
Links in Warning (Alerts)
The steps to create a link in the warning (Alerts) are as follows:

 
  

  
   
 
    
By creating a <div>, and adding a . Alert class and four context classes (that is, . alert-success,. Alert-info,. alert-warning,. Alert-danger), to add a basic warning box.
 
    
Use the . Alert-link entity class to quickly provide links with matching colors.
 
   
 
  
<! DOCTYPE html>
The results are as follows:
Series Articles:Bootstrap < Fundamentals > CSS Overview
bootstrap< Basic two > network system
bootstrap< Basic three > typesetting
bootstrap< basic Four > code
Bootstrap < Fundamentals five > forms
bootstrap< basic six > form
Bootstrap < basic seven > button
Bootstrap < basics eight > pictures
bootstrap< Basic Nine > Auxiliary class
bootstrap< Basic 10 > responsive Utility
bootstrap< Basic 11 > Font icons (glyphicons)
Bootstrap < Basics 12 > drop-down menu (dropdowns)
bootstrap< Basic 13 > button Group
bootstrap< Basic 14 > button drop-down menu
bootstrap< Basic 15 > Input Frame Group
bootstrap< basic 16 > Navigation elements
bootstrap< basic 17 > Navigation Bar Bootstrap < basic 18 > Breadcrumb navigation (Breadcrumbs) Bootstrap < Fundamentals 19 > Pagination bootstrap< Basics 20 > Tags Bootstrap < fundamentals 21 > badges (Badges) Bootstrap < basic 22 > Oversized screen (Jumbotron) Bootstrap < basic 23 > page title Header) bootstrap< Basic 24 > Thumbnail Bootstrap < basic 25 > Warning (Alerts)
Bootstrap < Fundamentals 25 > Warning (Alerts)