Installer et utiliser Bootstrap dans Angular

Installer et utiliser Bootstrap dans Angular est assez simple. L’installation ne nécessite que 2 étapes et l’utilisation se fait comme en html classique. Vous découvrirez dans cet article les étapes pour l’installer et un exemple concret d’utilisation.

Installer Bootstrap

Pour installer Bootstrap, vous avez seulement 2 choses à faire une fois votre projet ouvert :

1. Dans un nouveau terminal sous Visual Studio Code, tapez la commande suivante pour installer le package bootstrap dans votre projet :

npm install bootstrap --save

2. Bootstrap étant un ensemble de stylesheets, on doit le définir en tant que tel dans notre projet. On va donc avoir un fichier à modifier : angular.json : allez dans la section Architects – Build – Options – Styles et indiquez-y le chemin vers bootstrap : node_modules/bootstrap/dist/css/bootstrap.css

ATTENTION : vérifiez bien que vous être dans la bonne partie « styles » car il y en a plusieurs dans ce fichier.

Utiliser Bootstrap

Utiliser Bootstrap dans Angular revient à la même chose que de l’utiliser en HTML. En effet, comme il s’agit de classes CSS, on va l’utiliser à travers les templates html (xxx.component.html). Exemple simple :

<button type="button" class="btn btn-primary">Test</button>

Grâce à Bootstrap, vous obtiendrez de nombreux styles déjà prédéfinis que vous retrouverez sur le site officiel de Bootstrap.

Vous découvrirez également qu’avec bootstrap, vous pouvez créer des grilles sur base des DIV grâce aux classes ROW et COL-xx et par la même occasion créer des interfaces répondant aux diverses configurations possibles (diverses tailles d’écran en fonction des appareils).

En bref

Bref vous l’aurez compris, Bootstrap permet pas mal de choses mais le but de cet article était juste de vous dire comment l’installer et l’utiliser. Il s’agit donc d’un article très court mais pratique.

J’espère donc qu’il vous aura plu. N’hésitez pas à liker, partager et commenter. D’autres articles sur le même sujet seront ajoutés. Parfois courts, parfois longs mais avec à chaque fois des infos directes et utiles. Alors abonnez-vous pour ne rien manquer. A très bientôt sur le blog développement web facile.com ;-).