Bootstrap Alerts with Dismissible and Links with different classes

There are four classes for alert in Bootstrap 3 , success, info, warning , danger.

Thanks Successfully signed up . class='alert alert-success'

Login To post message you must login . class='alert alert-info'

Spam Don’t expose your email address. class='alert alert-warning'

Wrong Enter Correct email address. class='alert alert-danger'

<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>

Dismissible Alerts

× Wrong Enter Correct email address. class='alert alert-danger'

<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>

Links inide Alert

We often add links inside the alert. Links will have its own style of font and colour which will be displayed inside the alert. Here is one example of a normal link inside an alert.

Thanks Successfully signed up .Login Now

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

By adding class='alert-link' to the link we can match the colour of the link to parent alert style.

Thanks Successfully signed up .Login Now

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

One more example.

Failed You must agree to our terms and conditions

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

Reading adding and removing classes from Alert

We often use the same alert box to communicate different type of messages. Based on the requirement ( or condition ) we can change the class associated with the alert box.
Here d1 is the id of our alert message box.

Reading the present associated class

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

Removing one class and adding another.

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

Removing present class and adding a new class.

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

Here is a DEMO script to apply all classes to one alert box by using different buttons.

Using your own class with alert.

In the above demo we have used bootstrap available classes to change or update the style. You are not limited to use only above pre-defined classes. You can change the background colour and font to your favourite colour by adding style property. Keep this code inside your head tag to change colour of your alert.

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

Now add this class to your alert

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

Wants to try different colours ? Try this demo.

Managing the position and display of the alert box

Hiding the alert box to show only when it is required.

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

While displaying the alert message if you want your alert box to push the content down then use position relative.

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

If you don’t want your alert box to push the content down then use position absolute.

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

With position absolute, your message will be shown at top even you have moved to bottom of your page ( invisible to user unless they move to top ) . If your page has more data and message should display at the top ( below the address bar or within viewing area) at a fixed position even if the page is scrolled down ( several pages moved ), then use position fixed.

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

You may like to show the message over the existing content ( above ) then use z-index .

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

Show the message at top right corner.

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

After showing the message hide the box after a time delay. ( JQuery part )

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

Here 4000 is the duration in milliseconds for which the alert box will be visible and after which it will FadeOut. Adjust this value as per your requirment.

Removing previous class and adding new class

Based on the requirement we can apply different classes to our message box.

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

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Alerts in Bootstrap