Bootstrap 5 In Angular Application

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 functiona

Solution 1:

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]

Solution 2:

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 --><linkhref="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 --><scriptsrc="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/

Solution 3:

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.

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.