Utiliser Bootstrap dans une partie d'une page

J’ai eu a créer une page avec Bootstrap dans un site n’utilisant pas Bootstrap

Bootstrap gérant l’apparence de toute la page, il fallait l’isoler dans une classe pour ne pas créer de conflits

Voici comment procéder :

1. Télécharger la version compilée de Bootstrap
2. Installer LESS

npm install -g less

3. Créer un fichier prefix.less dans le dossier du css de Bootstrap

.bootstrap {
   @import (less) 'bootstrap.css';
}

4. Exécuter en ligne de commande

lessc --math=strict prefix.less bootstrap-prefixed.css

Vous aurez donc un fichier bootstrap-prefixed.css avec toutes les règles incluses dans une classe .bootstrap 5. Il y a quelques corrections à apporter au début du fichier bootstrap-prefixed.css au niveau des règles appliquées à :root et body :
enlever .bootstrap de :root et remplacer.bootstrap body par .bootstrap

Et voilà, vous pouvez utiliser ce fichier pour avoir le style de Bootstrap dans un élément ayant la classe .bootstrap.

Cela pouvait surement se faire en sass et j’aurais préféré, Bootstrap utilisant Sass, mais je n’ai pas trouvé de méthode simple.

Sources :

• How to Isolate Bootstrap CSS to Avoid Conflicts
• Importing css as less #28419