Bootstrap 3 Alerts (Legacy)

This page is retained for Bootstrap 3 legacy projects. Bootstrap 3 alert classes include success, info, warning and danger.

Bootstrap 3 Contextual Alerts Top ↑

<div class="alert alert-success">Success</div>
<div class="alert alert-info">Info</div>
<div class="alert alert-warning">Warning</div>
<div class="alert alert-danger">Danger</div>

Legacy Dismissible Alert Top ↑

<div class="alert alert-danger alert-dismissible">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Wrong:</strong> Enter the correct email address.
</div>

Change Legacy Alert Class with jQuery Top ↑

$( "#d1" )
    .removeClass(
        "alert-info alert-warning alert-danger alert-success"
    )
    .addClass( "alert-danger" );

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<div class='alert alert-success'>
  <strong>Thanks</strong>  Successfully signed up . class='alert alert-success'
</div>

<div class='alert alert-info'>
  <strong>Login</strong>  To Post message you must Login . class='alert alert-info'
</div>

<div class='alert alert-warning'>
  <strong>Spam</strong> Don’t expose your email address. class='alert alert-warning'
</div>

<div class='alert alert-danger'>
  <strong>Wrong</strong> Enter Correct email address. class='alert alert-danger'
</div>

Original example 2

<div class='alert alert-danger alert-dismissible'>
<a href='#' class='close' data-dismiss='alert' aria-label='close'>×</a>
  <strong>Wrong</strong> Enter Correct email address. class='alert alert-danger'
</div>

Original example 3

<div class='alert alert-success'>
  <strong>Thanks</strong>  Successfully signed up .<a href=#>Login Now</a>
 </div>

Original example 4

<div class='alert alert-success'>
  <strong>Thanks</strong>  Successfully signed up .<a href=# class='alert-link'>Login Now</a>
 </div>

Original example 5

<div class='alert alert-danger'>
<strong>Failed</strong>You must agree to our <a href=# class='alert-link'>terms & conditions</a>
</div>

Original example 6

var presentClassName = $('#d1').attr('class');

Original example 7

$('#d1').removeClass('alert alert-info').addClass( 'alert alert-danger' );

Original example 8

var presentClassName = $('#d1').attr('class');
$('#d1').removeClass( presentClassName).addClass( "alert alert-danger" );

Original example 9

<style>
.my_bg-class {
 background: #ffff80;
 color:#000000;
}
</style>

Original example 10

<div class='alert my_bg-class' id=d1> 
  <strong>Change My Colour!</strong> You can select and change my background colour.
</div>

Original example 11

<style>
#d1{
display: none;
  }
</style>

Original example 12

<style>
#d1{
 display: none;
 position: relative;
}
</style>

Original example 13

<style>
#d1{
 display: none;
 position: absolute;
}
</style>

Original example 14

<style>
#d1{
 display: none;
 position: fixed;
}
</style>

Original example 15

<style>
#d1{
 display: none;
 position: absolute;
 z-index: 10;
}
</style>

Original example 16

<style>
#d1{
 display: none;
 position: fixed;
 z-index: 10;
 top:0;
 right:0;
}
</style>

Original example 17

$("#d1").show();
setTimeout(function() { $("#d1").fadeOut('slow'); }, 4000);

Original example 18

var presentClassName = $('#d1').attr('class');
$('#d1').removeClass( presentClassName).addClass( "alert alert-danger" );

Additional Original Learning Routes Top ↑

• bs-badges.php
• fadein-fadeout.php
• msg-demo/bs-alert-colour.php
• msg-demo/bs-alert.php
• msg-demo/fadein-fadeout-alert.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: