Tutorial by Examples

Unlike some other Bootstrap components like Buttons, the Alerts do not come with a default or primary styling, because they are meant to alert the user in a specific way. <div class="alert alert-success" role="alert"> Some action was completed successfully </div&g...

<div class="container"> <h2>Alerts</h2> <div class="alert alert-success"> <strong>Success!</strong> </div> <div class="alert alert-info"> <strong>Info!</strong> </div> <div ...

The .fade and .in classes adds a fading effect when closing the alert message. <div class="alert alert-success fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <strong>Succ...

To give an alert close functionality, all we need is to add data-dismiss="alert" to our close button. <div class="alert alert-info alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria...

To quickly provide a matching color for links inside any alert, we can use the .alert-link utility class. <div class="alert alert-success"> You have won! Click <a href="#" class="alert-link">here</a> to claim your prize ... </div> <d...