Designing Custom Closable Alerts using Bootstrap 4

Custom closable alerts

1. Introduction

In this article, we will learn how to create custom closable alerts by applying different colors, borders, shadows, and hover effects for Bootstrap 4 applications. We will also learn how to apply different animations before disappearing alerts when a user closes the alert.

Demo link: https://satishpandey.github.io/bootstrap4-examples/custom-alerts.html

2. Overriding Color of an Alert

Overriding the color of the Bootstrap alerts is a very common requirement as per application themes. You just need to create a CSS class and must apply it to alert box. We have created a custom alert with a dark background and light text color.

.alert-primary-dark {
  background-color: #004085;
  border-color: #004085;
  color: #CCe5ff;
}

Now we need to apply this to the alert box.

<div class="alert alert-primary alert-primary-dark" role="alert">
  <strong>Animate Margin Left!</strong> Animate margin left for 1 second and close.
  <button type="button" class="close">
    <span>&times;</span>
  </button>
</div>

We have applied alert-primary-dark to alert box. Screenshot:

custom primary dark alert

3. Overriding Alert Border Radius

We can easily change the border radius of alerts by applying border-radius CSS property. Let’s see some examples by applying border-radius:
unset

8px

bootstrap alert border radius

36px

bootstrap alert border radius

4. Shadow and Hover Effects

By default, Bootstrap alerts don’t have any shadow effects. In the above examples, we are using shadows and you can play hover shadow effects on the demo link. Let’s see the required CSS rules to create a shadow.

.alert {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.24), 0 4px 16px 0 rgba(0,0,0,0.16);
}

.alert:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.48), 0 8px 32px 0 rgba(0,0,0,0.32);
}

Shadow

Hover effect

5.2. Using JavaScript

We can call JQuery slideUp API on close button click.

$("#slideUpClose").on("click", "button.close", function () {
  $(this).parent().slideUp(2000, function () {
    $(this).remove();
  });
});

We can also use JQuery animation API to do the dispose alert task.

$("#slideLeftUpClose").on("click", "button.close", function () {
  $(this).parent().animate({ width: 0, height: 0 }, 2000, "linear").hide('fast');
});

6. Animations and Sliders

You can visit the demo page to see all the animations working. You need to click on the alert close button to see it working. All associated animations are generated using JQuery animate API.

$("#slideLeftUpClose").on("click", "button.close", function () {
  $(this).parent().animate({ width: 0, height: 0 }, 2000, "linear").hide('fast');
});
$("#slideLeftClose").on("click", "button.close", function () {
  $(this).parent().animate({ left: 350 }, 1000, "linear").hide('fast');
});
$("#slideRightClose").on("click", "button.close", function () {
  $(this).parent().animate({ right: 350 }, 1000, "linear").hide('fast');
});
$("#textDisapearClose").on("click", "button.close", function () {
  $(this).parent().animate({ fontSize: 0 }, 1000, "linear").hide('fast');
});
$("#marginLeftClose").on("click", "button.close", function () {
  $(this).parent().animate({ marginLeft: 350, height: 0 }, 2000, "linear").hide('fast');
});

7. Conclusion

In this article, we focused on custom closable alerts. We have learned almost everything required including colors, borders, shadows, animations, close events. These steps will help you to get a start and design professional bootstrap alerts.

Demo link: https://satishpandey.github.io/bootstrap4-examples/custom-alerts.html

As always the complete source can be found over on GitHub.

Leave a Reply

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