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 :