<div class="card">
  <img src="https://assets.codepen.io/9367036/osheaga_1.jpg" alt="" class="rounded card-img-top mb-2" />
  <div class="card-body">
    <h2>Admission générale</h2>
    <p>À partir de <strong>395$</strong> CAD<br>
      <small>Taxes et frais de services inclus</small>
    </p>

    <button type="button" class="btn btn-lg btn-light" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
      Ajouter au panier
    </button>
  </div>
</div>

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">Ce que vous devez savoir</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>La disponibilité et les prix peuvent être modifiés. Le prix des billets de revente peut être supérieur à leur valeur nominale. <a href="#">En savoir plus</a></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Non merci</button>
        <button type="button" class="btn btn-primary">Continuer</button>
      </div>
    </div>
  </div>
</div>

<!-- Contenu : https://osheaga.com/fr/billets -->