In this how to guide, I will be adding Bootstrap 4 to a new Angular 7 application without leaving VS Code.
In this guide I have used VS Code 1.30.1, Chrome 71, Angular 7, Bootstrap 4
Create a new Angular Application
First step is to create a new Hello World Angular app. So after starting VS Code and starting a new terminal session, run:
ng new helloworld
When asked, accept the defaults regarding Angular routing and style sheet format
Once the app has been created, run it to ensure it works.
With the skeleton of the Angular app in place it is now time to use Node Package Manager (npm) to install Bootstrap.
From the Angular app directory that you just created run:
<<your path to >>\helloworld>npm install bootstrap
This will download the latest version, which at the time of writing was 4.2.1.
Configuring your app to use Bootstrap
Copy the relative path of the min version of Bootstrap css (Right click on the file and select copy relative path) On my PC this path was:
To make the Angular app aware of Bootstrap, open the file
<<your path to >>\helloworld\angular.json
now paste in the relative path of the bootstrap.min.css file, replacing the folder separator back slashes for forward slashes. so the relative path now becomes:
Note the quotations and comma, these are important and should be included. This is how this part of angular.json should now look like
Save your changes.
Normally Angular changes are immediately reflected but when making changes to the angular.json file I have noticed that you have to restart your local dev server in order for the changes to be picked up. Once done and with the your app running again using Chrome DevTools (Press F12) you can see Bootstrap is now included within your page.
Another check to ensure Bootstrap is correctly configured is to style a button so add the following button anywhere within the app.component.html file.
<button class="btn btn-danger">Don't press this!</button>
You should then see the button, styled by Bootstrap appear on your page. If not press F12 and investigate any errors displayed.
In this post I showed you how to add Bootstrap to a brand new Angular Application.