---
title: alerts
name: alerts
collection: samples
styleguide: true
layout: samples.html.swig
---

<div class="alert alert-info" style="margin-bottom:0;">
  <div class="row">
    <div class="col-xs-12">
      <h3>
      Séance d'information ce mardi 30 Août à 18h30
      </h3>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-10">
      <h4 class="fine-weight">
      Venez poser vos questions et discuter avec les responsables du cours à <a class="" href="https://goo.gl/maps/cxR4nmTFRn42">La Maison de la communication, Lausanne</a>.
      </h4 class="fine-weight">
    </div>
    <div class="col-sm-2">
      <a href="http://www.sawi.com/fr/seances-dinformation/form/?uid=215" class="btn btn-outline btn-block">Inscription</a>
    </div>
  </div>
</div>

<div class="spacer spacer-sm"></div>

<div class="alert alert-success">
  <div class="row">
    <div class="col-xs-12">
      <h3>Bravo !</h3>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <h4 class="fine-weight">
      Indique une action réussie ou hositive.
      </h4>
    </div>
  </div>
</div>

<div class="alert alert-danger">
  <div class="row">
    <div class="col-xs-12">
      <h3>Danger !</h3>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <h4 class="fine-weight">
      Indique une action dangereuse ou potentiellement négative.
      </h4>
    </div>
  </div>
</div>
</div>