Ejemplo Básico Agrega cualquier texto dentro de '.alert' y una de las 4 clases contextuales (e.g., .alert-success) para mensajes de alerta básicos.
Mensaje de éxito.
Mensaje informativo.
Mensaje de advertencia.
Mensaje de peligro.
<div class="alert alert-success" role="alert">CONTENIDO</div>
<div class="alert alert-info" role="alert">CONTENIDO</div>
<div class="alert alert-warning" role="alert">CONTENIDO</div>
<div class="alert alert-danger" role="alert">CONTENIDO</div>
Alertas con opción de cerrar Opcionalmente puedes agregar dentro de una alerta un '.alert-dismissible' y botón de cerrar.
Mensaje de éxito.
Mensaje informativo.
Mensaje de advertencia.
Mensaje de peligro.
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
CONTENIDO
</div>
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
CONTENIDO
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
CONTENIDO
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
CONTENIDO
</div>
Ligas en alertas Utiliza la clase '.alert-link' para agregar ligas del color de la ventana dentro de cualquier alerta.
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
CONTENIDO <a href="" class="alert-link">LINK</a>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
CONTENIDO <a href="" class="alert-link">LINK</a>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
CONTENIDO <a href="" class="alert-link">LINK</a>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
CONTENIDO <a href="" class="alert-link">LINK</a>
</div>