Bootstrap: Alerts And Illustrating Adding Bootstrap JS Functionality

Nog een leuk feature van BS is dat je alerts aan kan maken. Bijvoorbeeld een informatie berichtje als popup. 

Hiervoor gebruiken we de .alert klasse.

<div class="alert alert-success">
      Ik ben een makkelijk aanmaakbaar popup of mededeling berichtje.
</div>

Natuurlijk is een popup of mededeling het handigste wanneer je deze ook weer kan uitklikken. Hiervoor hebben we echter de Javascript functionaliteit van Bootstrap nodig. We gaan hier niet al te diep op in maar:

• We passen de code lichtjes aan door er een button en een extra klasse (.alert-dismissible) toe te voegen en op de knop de klasse .close en het attribuut data-dismiss=”alert” in te stellen
• We plaatsen daarna de CDN linkjes voor de gerelateerde Bootstrap Javascript code te laden
• Dan kijken we naar het effect van de JS te gebruiken versus deze uit te zetten

Onze nieuwe code wordt nu:

<div class="alert alert-info alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    Ik ben een makkelijk aanmaakbaar popup of mededeling berichtje.
  </div>

Hierdoor verkrijgen we een knop met ‘X’. Deze doet echter niets aangezien de gerelateerde Javascript code nog niet ingeladen is.

We voegen dus volgende scriptjes toe ((Bemerk dat de versie compatibel moet zijn met de versie van onze Bootstrap CSS en de andere Bootstrap Javascript code opdat alles correct werkt)):

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
      integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>

En nu kunnen we de alert sluiten. Dat was makkelijk!

Extra: Als we een link (anchor tag) binnen een alert willen plaatsen kunnen we deze ook qua kleur matchen via de klasse .alert-link op het anchor tag. Onderzoek dus altijd voor je iets zelf begint te schrijven of er reeds een klasse bestaat die dit voor je kan doen (wanneer je met bootstrap werkt).