Bootstrap in Angular

Angular
5

Mosh asks us to use Bootstrap’s icons to complete an exercise. As mentioned, this still works if you use Bootstrap 3. However, if you’re using the latest version of Bootstrap, why not use the newer Bootstrap Icons? In the second half of 2020, Bootstrap released its first stable version of Bootstrap Icons.

Course: Angular 4: Beginner to Pro
Section: Displaying Data and Handling Events
Video: 13- Exercise- Favorite Component

Here are the steps you’d need to add the Bootstrap star icons required in this exercise.

  1. Run the following command in the terminal window (in your project directory).
    npm i bootstrap-icons

  2. Add the following code to your styles.css file.
    @import "~bootstrap-icons/font/bootstrap-icons.css";

  3. Add the following code to your courses.component.ts file’s template section (or the file it references).
    <i class="bi bi-star"></i> <i class="bi bi-star-fill"></i>

2 Likes