Alerts

 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>

 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>

 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>

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>

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>