Bootstrap Alert

To use bootstrap alert, you can follow the following classes alongwith closing alert and animated alert.

Default Alert

Code Structure:
<div class="container">
    <h1>Alert</h1>
    <div class="alert alert-success">
        This is <strong>Success</strong> alert.
    </div>
    <div class="alert alert-info">
        This is <strong>Info</strong> alert.
    </div>
    <div class="alert alert-warning">
        This is <strong>Warning</strong> alert.
    </div>
    <div class="alert alert-danger">
        This is <strong>Danger</strong> alert.
    </div>
</div>

Closing Alert

It is required to add aria-label=”close” and class=”close” while creating close button.

Code Structure:
<div class="container">
    <h1>Closing Alert</h1>
    <div class="alert alert-success">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        This is <strong>Success</strong> alert with close button.
    </div>
    <div class="alert alert-info">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        This is <strong>Info</strong> alert with close button.
    </div>
    <div class="alert alert-warning">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        This is <strong>Warning</strong> alert with close button.
    </div>
    <div class="alert alert-danger">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        This is <strong>Danger</strong> alert with close button.
    </div>
</div>

Closing Alert with Fade Effect

.fade and .in classes are required to add fade effect when closing the alert.

Code Structure:
<div class="container">
    <h1>Closing Alert with Fade Effect</h1>
    <div class="alert alert-success fade in">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        This is <strong>Success</strong> alert with close button with fade effect.
    </div>
    <div class="alert alert-info fade in">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        This is <strong>Info</strong> alert with close button with fade effect.
    </div>
    <div class="alert alert-warning fade in">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        This is <strong>Warning</strong> alert with close button with fade effect.
    </div>
    <div class="alert alert-danger fade in">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        This is <strong>Danger</strong> alert with close button with fade effect.
    </div>
</div>

Share this

Related Posts