"A different Approach to Bootstrap Alert "
Bootstrap 3.2.0 Snippet by oritromax

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<br><br>
<div class="error-notice">
<div class="oaerror danger">
<strong>Error</strong> - You provided a wrong username/password
</div>
<div class="oaerror warning">
<strong>Error</strong> - You left a field Blank
</div>
<div class="oaerror info">
<strong>Error</strong> - Please Select a Different Username
</div>
<div class="oaerror success">
<strong>Yeppi</strong> - You are successfully registered. Please login.
</div>
</div>
</div>
</div>
<center>Cursed By <a href="http://ioritro.com/486/a-different-approach-to-bootstrap-alert/">Oritro Ahmed </a></center>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
27
28
29
30
31
32
33
34
35
36
37
.error-notice {
margin: 5px 5px; /* Making sure to keep some distance from all side */
}
.oaerror {
width: 90%; /* Configure it fit in your design */
margin: 0 auto; /* Centering Stuff */
background-color: #FFFFFF; /* Default background */
padding: 20px;
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
margin: 0 auto;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
.danger {
border-left-color: #d9534f; /* Left side border color */
background-color: rgba(217, 83, 79, 0.1); /* Same color as the left border with reduced alpha to 0.1 */
}
.danger strong {
color: #d9534f;
}
.warning {
border-left-color: #f0ad4e;
background-color: rgba(240, 173, 78, 0.1);
}
.warning strong {
color: #f0ad4e;
}
.info {
border-left-color: #5bc0de;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

beautiful~

vivi () - 10 years ago - Reply 0


Copy of Bootstrap official docs : bs-callout. But thanks for the code ! ;)

FrBillyD () - 10 years ago - Reply 0


awesome!

allaghi () - 10 years ago - Reply 0


Very nice idea, good comments in CSS, thanks!

mrmccormack () - 10 years ago - Reply 0


Very very good, A+. I think, it's the best snippet of bootsnipp.com. You made my day. I was going to develop same thing. You saved my time!! Please keep coding, I like your color choice

Guest Poster () - 10 years ago - Reply 0


It´s a nice idea =)

Bruno Seixas () - 10 years ago - Reply 0


Thank you Bruno

oritromax () - 10 years ago - Reply 0