Alerts

Alerts Shortcodes

Styles for success, info, warning, and error messages.


Default

Well done! You are using a awesome theme! Say Hi to Porto .
Well done! You are using a awesome theme! Say Hi to Porto .
Need any help?! We are glad to help you, if you need.
We must tell you! This theme is made with love by the Mandeeps team.
Oh snap! Are you using other theme? Buy Porto now and make your customers a lot happier.
Well done! You are using a awesome theme! Say Hi to Porto .

Announcement!

We are extermely happy to announce our first admin. We dedicated a lot of effort to bring you tons of features, easily customization for an accessible price! Do you still have any doubts that this is the best choice?

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="alert alert-default">
    <strong>Well done!</strong> You are using a awesome theme! <a class="alert-link">Say Hi to Porto </a>.
</div>
<div class="alert alert-success">
    <strong>Well done!</strong> You are using a awesome theme! <a class="alert-link">Say Hi to Porto </a>.
</div>
<div class="alert alert-info">
    <strong>Need any help?!</strong> We are glad <a class="alert-link">to help you</a>, if you need.
</div>
<div class="alert alert-warning">
    <strong>We must tell you!</strong> This theme is made with love by the <a class="alert-link">Mandeeps team</a>.
</div>
<div class="alert alert-danger">
    <strong>Oh snap!</strong> Are you using other theme? <a class="alert-link">Buy Porto now</a> and make your customers a lot happier.
</div>
<div class="alert alert-dark">
    <strong>Well done!</strong> You are using a awesome theme! <a class="alert-link">Say Hi to Porto </a>.
</div>
<div class="alert alert-info fade in nomargin">
    <h4>Announcement!</h4>
    <p>We are extermely happy to announce our first admin. We dedicated a lot of effort to bring you tons of features, easily customization for an accessible price! Do you still have any doubts that this is the best choice?</p>
    <p>
        <button class="btn btn-info mt-xs mb-xs" type="button">Yes, it's the best choice</button>
        <button class="btn btn-default mt-xs mb-xs" type="button">Not convinced yet</button>
    </p>
</div>

Colors

Well done! You are using a awesome theme! Say Hi to Porto .
Well done! You are using a awesome theme! Say Hi to Porto .
Well done! You are using a awesome theme! Say Hi to Porto .
Well done! You are using a awesome theme! Say Hi to Porto .

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div class="alert alert-primary">
    <strong>Well done!</strong> You are using a awesome theme! <a class="alert-link">Say Hi to Porto </a>.
</div>
<div class="alert alert-secondary">
    <strong>Well done!</strong> You are using a awesome theme! <a class="alert-link">Say Hi to Porto </a>.
</div>
<div class="alert alert-tertiary">
    <strong>Well done!</strong> You are using a awesome theme! <a class="alert-link">Say Hi to Porto </a>.
</div>
<div class="alert alert-quaternary">
    <strong>Well done!</strong> You are using a awesome theme! <a class="alert-link">Say Hi to Porto </a>.
</div>

Dismissible alerts

Build on any alert by adding an optional .alert-dismissible.

With Icons

Add any icon you want from the icons library.

Well done! You successfully read this important alert message.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<div class="row">
    <div class="col-md-6">
        <h4 class="mb-none">Dismissible alerts</h4>
        <p>Build on any alert by adding an optional .alert-dismissible.</p>
        <div class="alert alert-warning alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>Warning!</strong> Better check yourself, you're not looking too good.
        </div>
    </div>
    <div class="col-md-6">
        <h4 class="mb-none">With Icons</h4>
        <p>Add any icon you want from the icons library.</p>
        <div class="alert alert-success">
            <strong><em class="fa fa-thumbs-o-up"></em> Well done!</strong> You successfully read this important alert message.
        </div>
    </div>
</div>

Sizes

Heads up! This alert needs your attention, but it's not super important.
Heads up! This alert needs your attention, but it's not super important.
Heads up! This alert needs your attention, but it's not super important.

HTML Shortcode

1
2
3
4
5
6
7
8
9
<div class="alert alert-info alert-sm">
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-info">
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-info alert-lg">
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>

Summary

HTML Shortcode

1
2
3
4
5
6
7
8
<div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong><em class="fa fa-warning"></em>Oh snap!</strong> Change a few things up and try submitting again.
    <ul>
        <li>Inform your username.</li>
        <li>Inform your password.</li>
    </ul>
</div>

Newsletter

Keep up on our always evolving product features and technology. Enter your e-mail and subscribe to our newsletter.

About Our Company

Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu nam sapien stibulum ridiculus pellentesque eros!

Get in touch

  • Address: 1234 Street, United States

  • Phone: (123) 456-7890

  • Email: mail@example.com