Add bootstrap to Angular 7

How To Add Bootstrap To Angular 7

In this tutorial, you’ll learn how to add bootstrap to Angular 7. Let’s get started by creating an Angular 7 app using the angular cli.

Creating Angular 7 App

Start by installing the Angular CLI using npm.

// install angular cli
npm install -g @angular/cli

Once you have the Angular CLI installed, create an Angular app using the Angular CLI.

// install angular app
ng new angular-app

The above command creates an Angular boilerplate project.

Add Bootstrap to Angular 7

In order to add bootstrap to Angular 7 you need to install bootstrap and jQuery using npm.

// install jquery and bootstrap
npm install bootstrap jquery

Once bootstrap has been installed, you need to include the bootstrap script and style references in the angular.json under architect -> build key.

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Save the above changes and you should be able to use bootstrap in the Angular app.

Conclusion

In this tutorial, you learnt how to add bootstrap to Angular 7.

One thought on “How To Add Bootstrap To Angular 7

Leave a Reply

Your email address will not be published. Required fields are marked *