Comment installer Bootstrap 5 ?

Catégories : Bootstrap

Comment installer Bootstrap 5 ?

Dans cet article, je vais vous expliquer comment installer Bootstrap 5 rapidement, et le plus simplement possible.

Sommaire :

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/bootstrap@5.1.3/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/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    </body>
</html>

Voir le code en action !

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/bootstrap@5.1.3/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/core@2.10.2/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/bootstrap@5.1.3/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 !

Il est important de noter que si l’utilisation de CDN est très simple et rapide, elle n’est pas conseillée à utiliser en production, c’est à dire la version en ligne de votre site web. En effet, si un jour le CDN a un problème (ça arrive, même aux meilleurs), c’est votre site qui en pâtira.

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 !