Bootstrap in Angular

Angular
1

I’m trying to import Icons from bootstrap, however, the course material is outdated as it is only shown Bootstrap 2.

How does one import icons from Bootstrap 4 to Angular? I’m trying to complete the Exercise in Angular: [Displaying Data and Handling Episode 13](https://codewithmosh.com/courses/206545/lectures/3196246)

I followed the solution exactly as shown but doesn’t work. Is there any @imports I need to do? How can I complete this exercise with the current bootstrap?

3 Likes
2

Im in the same situation =/

3

same here bootstrap 4 is not working when I downgraded the version to 3 it works I tried it to css stylesheet and it works I’m not sure yet with scss stylesheet.

Hello @Mosh sir I hope you will add new course for the scss and also using the new update of bootstrap thanks.

4

I had the same problem, I am aware that downgrading resolves the bootstrap problem, but I take it as a challenge to find a solution with the newer version. I most often do find one, but in this case it required for me to import some FontAwesome libraries, and found myself stuck there, so I decided to skip the exercise. I hate downgrading, and if you want to be compliant with your projects, you need to upgrade frequently and resolve issues.

Apart from updating the videos, @Mosh you could also provide the code material at the beginning of each section, it would make it possible for me to continue (if I skipped some exercise) and if I ever want to go back in the course and revisit some part of it, I can easily go into the section, download the code and start from there.

I bought a lot of your C# courses on udemy, and I still go there very frequently to revisit some concept, or to see what the best practice is around something.

2 Likes
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
6

@Heroe @therist @Vanxxel @FlyingVespa

If you would like to use Bootstrap 4, remember to reference the migration docs to see what changes need to be made to use the new Bootstrap version. See the examples below, which shows the code used in the video, and the new code you’ll need to use in order to use the newer version of Bootstrap.
~----------------------------------~
UPDATE: As of the time of this writing, Bootstrap 5 is in beta. So, by the time you’re reading this, you may need to read the migration docs from v4 to v5. This is just part of the developer game. Updates get released, code gets updated or older versions are maintained. That’s why it’s so important to learn from the generosity of the posts that communities such as this one and StackOverflow provide. Or, as we are taught in Mosh’s classes, learn the fundamentals so that no matter what version is released, you can read and understand the documentation and port your own code. I wish everyone the best of luck.
~----------------------------------~

See the following documentation for more information.

Course: Angular 4: Beginner to Pro
Section: Building Re-usable Components (1h)
Video: 11- ngContent

<!-- Bootstrap 3 -->
<div class="panel panel-default">
    <div class="panel-heading">Heading</div>
    <div class="panel-body">Body</div>
</div>

<!-- Bootstrap 4 -->
<div class="card">
    <div class="card-header">Heading</div>
    <div class="card-body">Body</div>
</div>

Course: Angular 4: Beginner to Pro
Section: Directives (1h)
Video: 4- ngSwitchCase

File: app.component.html

<!-- Bootstrap 4 -->
<ul class="nav nav-pills">
  <li class="nav-item" >
    <a class="nav-link" 
      [class.active]="viewMode == 'map'" 
      (click)="viewMode = 'map'"
      href="#">Map View</a>
  </li>
  <li class="nav-item" >
    <a class="nav-link" 
    [class.active]="viewMode =='list'" 
    (click)="viewMode = 'list'"
    href="#">List View</a>
  </li>
</ul>

<div [ngSwitch]="viewMode">
  <div *ngSwitchCase="'map'">Map View Content</div>
  <div *ngSwitchCase="'list'">List View Content</div>
  <div *ngSwitchDefault>Otherwise</div>
</div>

File: app.component.ts

export class AppComponent {
  viewMode:string ="";
}
1 Like