HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="alert-wrap">
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <i class="fa fa-check"></i> <strong>Success!</strong> Acoount Activated Sucessfully !!
</div>
 
<div class="alert alert-info">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <i class="fa fa-info"></i> <strong>Info!</strong> Your Profile will be activated soon !!
</div>
 
<div class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <i class="fa fa-exclamation"></i> <strong>Warning!</strong> Your Account activities are against our standards
</div>
 
<div class="alert alert-danger">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <i class="fa fa-times"></i> <strong>Danger!</strong> Your Account Balance is negative <a href="#" class="alert-link">Take Action</a> !!
</div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
.alert{padding: 20px; transition:all .3s ease;}
.alert:hover, .alert:focus{transform:scale(1.04); -webkit-box-shadow: 0 8px 20px #e8e8e8;box-shadow: 0 8px 20px #e8e8e8;}
.alert-wrap { width:80%;  margin:50px auto 0;}
.alert .close{opacity:0; transition:opacity .3s ease;}
.alert:hover .close, .alert:focus .close{opacity:.2;}
.alert i{min-width:30px; text-align:center;}
.alert-success{background: rgb(214,233,198);background: linear-gradient(0deg, rgba(214,233,198,1) 0%, rgba(198,233,229,1) 100%);}

.alert-info{background: rgb(188,232,241);background: linear-gradient(0deg, rgba(188,232,241,1) 0%, rgba(188,208,241,1) 100%);}

.alert-warning{background: rgb(250,235,204);background: linear-gradient(0deg, rgba(250,235,204,1) 0%, rgba(250,227,204,1) 100%);}

.alert-danger{background: rgb(235,204,209);background: linear-gradient(0deg, rgba(235,204,209,1) 0%, rgba(235,204,221,0.927608543417367) 100%);}

Preview

bootstrap alert with icons

Leave a Reply

avatar
  Subscribe  
Notify of