<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">
<div class="alert-group">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Sucesso!</strong> Este é um exemplo de mensagem de Sucesso!
</div>
<div class="alert alert-info">
<strong>Atenção!</strong> Esse alerta precisa de sua atenção, mas não é super importante.
</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Aviso!</strong> Melhor verificar, este aviso não é muito bom.
</div>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Erro!</strong> Ocorreu um erro, mude algumas coisas e tente enviar novamente.
</div>
</div>
</div>
</div>