<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-6">
<div class="alert alert_info"> <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button> <strong>Info!</strong> </div>
<div class="alert alert_success"> <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button> <strong>success!</strong> </div>
<div class="alert alert_warning"> <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button> <strong>warning!</strong> </div>
<div class="alert alert_error"> <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button> <strong>error!</strong> </div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-6">
<div class="alert fade_info .fade"> <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button> <strong>Info!</strong> </div>
<div class="alert fade_success .fade"> <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button> <strong>success!</strong> </div>
<div class="alert fade_warning .fade"> <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button> <strong>warning!</strong> </div>
<div class="alert fade_error .fade"> <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button> <strong>error!</strong> </div>
</div>
</div>
</div>
.alert {
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
color: #fff;
text-transform: uppercase;
font-size: 12px
}
.alert_info {
background-color: #4285f4;
border: 2px solid #4285f4
}
button.close {
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: 0 0;
border: 0
}
.close {
font-size: 20px;
color: #fff;
opacity: 0.9;
font-weight: normal
}
.alert_success {
background-color: #09c97f;
border: 2px solid #09c97f
}
.alert_warning {
background-color: #f8b15d;
border: 2px solid #f8b15d
}
.alert_error {
background-color: #f95668;
border: 2px solid #f95668
}
.fade_info {
background-color: #d9e6fb;
border: 1px solid #4285f4
}
.fade_info .close {
color: #4285f4
}
.fade_info strong {
color: #4285f4
}
.fade_success {
background-color: #c9ffe5;
border: 1px solid #09c97f
}
.fade_success .close {
color: #09c97f
}
.fade_success strong {
color: #09c97f
}
.fade_warning {
background-color: #fff0cc;
border: 1px solid #f8b15d
}
.fade_warning .close {
color: #f8b15d
}
.fade_warning strong {
color: #f8b15d
}
.fade_error {
background-color: #ffdbdb;
border: 1px solid #f95668
}
.fade_error .close {
color: #f95668
}
.fade_error strong {
color: #f95668
}