Bootstrap

Krok 1: Instalacja Bootstrap w Angular.
Otwórz Terminal w Visual Studio 2022 i wpisz następujące polecenie:


npm install bootstrap

Krok 2: Dodanie Bootstrap do angular.json
Po zakończonej instalacji musisz dodać ścieżki do plików Bootstrap CSS i JS.

1. Otwórz plik angular.json
2. Znajdź sekcję „styles” i „scripts” i dodaj do niej Bootstrap:

„styles”: [
„node_modules/bootstrap/dist/css/bootstrap.min.css”
],
„scripts”: [
„node_modules/bootstrap/dist/js/bootstrap.bundle.min.js”
]


Dzięki temu Bootstrap zostanie automatycznie dołączony do aplikacji.

Krok 3: Restart serwera
Jeśli aplikacja już działa, zatrzymaj ją (Ctrl + C) i uruchom ponownie:

ng serve

Krok 4: Sprawdzenie działania Bootstrap
Możesz teraz użyć klasy Bootstrapa np. w app.component.html:

Witaj w Angular + Bootstrap!

Kliknij mnie

<div class=”container mt-5″>
<h1 class=”text-primary”>Witaj w Angular + Bootstrap!</h1>
<button class=”btn btn-success”>Kliknij mnie</button>
</div>