Bootstrap 5 in Angular Application

user_7340122 0
Viewed 17231

Since version 5 Bootstrap framework has removed jQuery as a requirement.

I want to know how this change affects the Angular application?

Can we use all provided Bootstrap functionalities in Angular (for example dropdowns)?

I know that Angular shouldn't be combined with JQuery - in earlier versions of Bootstrap, JQuery was recommened to import if we want to use all bootstrap functionalities and it was bad.

But Bootstrap 5 doesn't rely on JQuery anymore so is it safe to use it with my Angular applications?

As for now I don't want to use bootstrap alternatives like ng-bootstrap, that is why I'm asking is it okay and safe to use Bootstrap 5 in Angular?

bootstrap-5 twitter-bootstrap angular jquery javascript
3 Answers

to install bootstrap simply use

npm install bootstrap

And edit the angular.json file

        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css", //<--add this line
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" //<--and this line
        ]
user_85581860

You first need to install the Node Package Manager

You then install Bootstrap in your project using your IDE's Terminal. In Visual Studio code this can be brought up by clicking CTRL + ` or going to the View Menu.

You then install Bootstrap 5 in your project with the following command.

npm install bootstrap@next

You then have to import that package so that Angular is aware of it. You do this by adding the necessary directives in the Angular.json file.

angular.json file

You then add the following path to the CSS.

"./node_modules/bootstrap/dist/css/bootstrap.min.css",

And the following to the JS

"./node_modules/bootstrap/dist/js/bootstrap.min.js"

You can then also add the popper JS.

Using the following NPM command you can add popper.js to your project.

npm install @popperjs/core

Then also adding the directive to your angular.json file

"./node_modules/@popperjs/core/dist/umd/popper.min.js"

So that your angular.json file looks like this.

Angular.json complete

user_51655300

Yes, you can use it now. You can use it by installing with npm as well as by including the CDN links in your project.

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

You can also check the implementation of the bootstrap 5 in angular 11 here. - https://www.c-sharpcorner.com/article/add-bootstrap-5-in-angular-11/

user_135972450
Related