Démonstration de Bootstrap 5
Cette page présente plusieurs composants de Bootstrap 5 intégrés en HTML.
1. Boutons
Voici quelques styles de boutons Bootstrap :
Attention ! Ceci est un message d’alerte.
Info : Vous utilisez Bootstrap 5 !
<h5 class="card-title">Titre de la carte</h5>
<p class="card-text">Exemple de texte dans une carte Bootstrap.</p>
<a href="#" class="btn btn-primary">En savoir plus</a><div class="col-md-4 bg-primary text-white">Colonne 1</div>
<div class="col-md-4 bg-secondary text-white">Colonne 2</div>
<div class="col-md-4 bg-success text-white">Colonne 3</div>Warning! Indicates a warning that might need attention.
Warning! Indicates a warning that might need attention.
1.5.3 Boîte de type “alert-danger”
Danger! Indicates a dangerous or potentially negative action.
Danger! Indicates a dangerous or potentially negative action.
1.5.4 Boîte de type “alert-info”
Info: indicates a neutral informative change or action.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark
Voici la règle CSS de la classe .img-fluid :
.img-fluid {
max-width: 100%;
height: auto;
}...<div class="col">
<p>Une photo de Venise :</p>
<img src="https://www.eni-training.com/download/a56ddf8b-33c9-4569-8975-0a29cd1db968/images/C05-001.png?id=AAEAAAD%2f%2f%2f%2f%2fAQAAAAAAAAAMAgAAAE1FbmkuRWRpdGlvbnMuTWVkaWFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VuaS5FZGl0aW9ucy5NZWRpYXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAAwdGVzdCB2Ml84IC0gZmZhNjQzOWQtZDZjYi00NzYxLWJhYTMtZWZkZDNiZDcwMWM25rSq0F7p2IgL" class="img-fluid" alt="Un canal à Venise">
</div>