<div class="col-md-6 container">
<div class="alert alert-general"> <i class="fa fa-info"></i> General Message. Your Message Comes Here <span class="close"></span> </div>
<div class="alert alert-error"> <i class="fa fa-columns"></i> Error Message. Your Message Comes Here <span class="close"></span> </div>
<div class="alert alert-help"> <i class="fa fa-columns"></i> Help Message. Your Message Comes Here <span class="close"></span> </div>
</div>
.container {
margin-top: 100px
}
.alert.alert-general {
background: #d9d9d9
}
.alert.alert-help {
background: #91e3fd
}
.alert.alert-error {
background: #f6bcc3
}
.alert .close,
.info-box .close {
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
font-weight: normal;
color: #fff;
font-size: 12px;
cursor: pointer;
text-shadow: none;
float: none;
position: absolute;
top: 8px;
right: 8px
}
.close:before {
content: "\f00d";
font-family: FontAwesome
}
.fa {
color: #fff
}