Dans cet article, je vais vous expliquer comment installer Bootstrap 5 rapidement, et le plus simplement possible.
Sommaire :
Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.
Trouver un développeur web
La solution CDN
Si vous souhaitez simplement expérimenter Bootstrap, alors utiliser un CDN est fait pour vous. Voici un fichier HTML complet utilisant Bootstrap, qui peut vous servir de point de départ :
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap CDN</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="mt-5">
<a href="#" class="btn btn-primary">Hello world !</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
Trouvez le meilleur développeur web sur Codeur.com
Vos premiers devis en 15 minutes
Gratuit et sans obligation
Déjà plus de 75 000 clients
Un CDN permet d’accéder grâce à un lien en ligne aux ressources dont a besoin Bootstrap pour fonctionner ! Ce qui veut dire que sans internet, votre site ne fonctionnera pas.
Mais voyons de plus près ce template. Il consiste en l’ajout de 3 balises :
1. Le CSS de Bootstrap
1ère balise à ajouter :
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
link est à rajouter dans la balise head. Elle va rechercher et inclure tous les fichiers CSS de Bootstrap, c’est à dire le style.
2. Popper.js
2ème balise à ajouter :
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
La balise script est à inclure dans body, tout en bas de votre contenu. Ici, nous incluons popper.js, un plugin Javascript externe que Bootstrap utilise pour certaines de ses fonctionnalités.
3. Le Javascript de Bootstrap
3ème et dernière balise à ajouter :
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
Avec ces 3 liens CDN correctement inclus, vous pouvez déjà commencer à tester Bootstrap 5 !
Pour une version en production, on préfèrera alors une installation en local de Bootstrap.
Pour plus d’informations, n’hésitez pas à consulter la documentation officielle de Bootstrap 5. Aussi, n’oubliez pas que vous pouvez trouver des freelances disponibles pour vous aider dans votre projet Boostrap sur Codeur.com !
