oraclefrontovik

Sharing what I learn

In this how to guide, I will be adding Bootstrap 4 to a new Angular 7 application without leaving VS Code.

Prerequisites

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.

Install Bootstrap

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:

node_modules\bootstrap\dist\css\bootstrap.min.css

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:

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

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.

Testing

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.

Summary

In this post I showed you how to add Bootstrap to a brand new Angular Application.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: