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

<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="fas 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>