HTML

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
<div class="box-alert">
<div class="alert bg-info">
  <i class="fa fa-info"></i>
  <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </p>
  <div><a href="#" data-dismiss="alert" class="btn btn-info" aria-label="close">OK</a></div>
</div>

<div class="alert bg-success">
  <i class="fa fa-info"></i>
  <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </p>
  <div><a href="#" data-dismiss="alert" class="btn btn-success" aria-label="close">OK</a></div>
</div>

<div class="alert bg-warning">
  <i class="fa fa-info"></i>
  <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </p>
  <div><a href="#" data-dismiss="alert" class="btn btn-warning" aria-label="close">OK</a></div>
</div>

<div class="alert bg-danger">
  <i class="fa fa-info"></i>
  <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </p>
  <div><a href="#" data-dismiss="alert" class="btn btn-danger" aria-label="close">OK</a></div>
</div>
</div>

CSS

1
2
3
4
5
.box-alert{margin:50px auto 0; width:50%;}
.box-alert .alert{text-align:center; padding:50px inherit; line-height:24px;}
.box-alert .alert:hover, .box-alert .alert:focus{transform:scale(1); -webkit-box-shadow: 0 8px 20px #e8e8e8;box-shadow: 0 8px 20px #e8e8e8;}
.box-alert i{display:block; margin:0 auto 10px; width:50px; height:50px; line-height:44px; border-radius:50%; border:2px solid;     font-size: 22px;}
.box-alert .btn{display:block; margin-top:20px;     border-radius: 0;    padding: 10px 20px;}

Preview

bootstrap alert box

Leave a Reply

avatar
  Subscribe  
Notify of