Angular 9 Bootstrap Kütüphanesi Ekleme

Merhaba,

Önceki yazımda .Net Core ve Angular 9 ile Product Card kodlaması yapmıştık.

Bu yazımda ise UI tarafı zenginleştirecek bootstrap kütüphanesini projeye import edeceğiz.

VS Code üzerinde projemizi açıp terminalde aşağıdaki komutu çalıştıralım.

npm install bootstrap — save

Daha sonra proje ana dizininde bulunan node_modules dizini içerisinde bootstrap/dist/css şeklinde dosya kontrolü yapıyoruz.

angular.json dosyasını bulup içinde “styles” aratıp bootstrap css path’ini ekleyelim.

angular.json dosyasını bulup içinde “scripts” aratıp bootstrap js path’ini ekleyelim.

styles.css dosyasını açalım ve css dosyasını aşağıdaki şekilde import edelim.

@import “~bootstrap/dist/css/bootstrap.css”;

product-card.component.html sayfamızı açalım.

Sonuç olarak product card sayfamız aşağıdaki gibi oluşuyor.

İyi Çalışmalar :)