CODEWITHSUNDEEP
javascriptjqueryangulartwitter-bootstrapbootstrap-5
Rocky3582
Rocky3582

Reputation: 663

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 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?

Upvotes: 18

Views: 57533

Answers (6)

CJCHRIST777
CJCHRIST777

Reputation: 94

ng add @ng-bootstrap/ng-bootstrap

Bootstrap says you need to

use a framework-specific package instead of the Bootstrap JavaScript

Reference: Bootstrap - Usage with JavaScript frameworks

Upvotes: 1

Ufuk
Ufuk

Reputation: 81

step 1: npm install bootstrap --save

step 2: Open src/style.css

Add the following line of code to the style.css

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Upvotes: 8

Arvind Chourasiya
Arvind Chourasiya

Reputation: 17422

To install bootstrap in angular application use below command in terminal

npm install bootstrap --save

Now open angular.json file and add below line in styles section

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

That's all.

Upvotes: 1

Neil Meyer
Neil Meyer

Reputation: 591

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

Upvotes: 5

Eliseo
Eliseo

Reputation: 57939

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
        ]

Upvotes: 45

thelovekesh
thelovekesh

Reputation: 1452

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/

Upvotes: 6

Related Questions