Bootstrap Alert

bootstrap alert
bootstrap alert
bootstrap alert

Bootstrap Alert Provides feedback messages for typical user actions with the handful of available and flexible alert messages.

There are pr-defined alert classes for Success, Error, Info, and Danger only we have to call that classes. .alert is by default alert class after that we have to add classes like (.alert .alert-success ) for Successful Alert Box For Info ( (.alert .alert- info ) , for Danger (.alert .alert- danger), for warning ( .alert alert-warning )

<div class="container">
     <div class="row">
      
      <div class="col-md-12">
        <div class="alert alert-primary" role="alert">
           This is a primary alert!
        </div>
       </div>
        
       <div class="col-md-12"> 
       <div class="alert alert-secondary" role="alert">
          This is a secondary alert!
       </div>
      </div>
       
      <div class="col-md-12">
      <div class="alert alert-success" role="alert">
         This is a success alert!
      </div>
     </div>
      
      <div class="col-md-12">
      <div class="alert alert-danger" role="alert">
         This is a danger alert!
      </div>
     </div>
      
      <div class="col-md-12">
      <div class="alert alert-warning" role="alert">
        This is a warning alert!
      </div>
      </div>
      
      <div class="col-md-12">
      <div class="alert alert-info" role="alert">
        This is a info alert!
      </div>
     </div>
      
      <div class="col-md-12">
      <div class="alert alert-light" role="alert">
        This is a light alert!
      </div>
     </div>
      
      <div class="col-md-12">
      <div class="alert alert-dark" role="alert">
        This is a dark alert!
      </div>
     </div>
      
      
     </div>
   </div>

Link Alert

<div class="container">
     <div class="row">
  
   <div class="col-md-12">
      <div class="alert alert-primary" role="alert">
        This is a primary alert with <a href="#" class="alert-link">Link Example</a>
      </div>
   </div>
   
   
   <div class="col-md-12">
      <div class="alert alert-secondary" role="alert">
        This is a secondary alert with <a href="#" class="alert-link">Link Example</a>
     </div>
   </div>
   
   
   <div class="col-md-12">
     <div class="alert alert-success" role="alert">
       This is a success alert with <a href="#" class="alert-link">Link Example</a>
     </div>
   </div>
   
   
   <div class="col-md-12">
      <div class="alert alert-danger" role="alert">
        This is a danger alert with <a href="#" class="alert-link">Link Example</a>
      </div>
   </div>
   
   
   <div class="col-md-12">
      <div class="alert alert-warning" role="alert">
        This is a warning alert with <a href="#" class="alert-link">Link Example</a>
      </div>
   </div>
   
   
   <div class="col-md-12">
      <div class="alert alert-info" role="alert">
        This is a info alert with <a href="#" class="alert-link">Link Example</a>
     </div>
   </div>
   
   
   <div class="col-md-12">
      <div class="alert alert-light" role="alert">
         This is a light alert with <a href="#" class="alert-link">Link Example</a>
      </div>
   </div>
   
   
   <div class="col-md-12">
      <div class="alert alert-dark" role="alert">
         This is a dark alert with <a href="#" class="alert-link">Link Example</a>
      </div>
   </div>
   
   </div>
  </div>

Leave a Reply

avatar
  Subscribe  
Notify of