how to add bootstrap 4 to Angular 9 App

Introduction

This article is part of a series. If you want to catch up you can start here - it won't take long. Alternatively you can download the git repo from here 

The App currently looks like this:

We are going to add Bootstrap 4. Then we will change the menu component to use Bootstrap CSS classes and Angular, and see how much better it looks.

Add Bootstrap via NPM

Open your project in your IDE, or open a command prompt at the root of the project. Type the following :

npm install bootstrap
npm install jquery

Hook the Bootstrap CSS or SCSS files into Angular

Open the "angular.json" file. We need to add the Bootstrap styles file into the first line of the styles array. Currently the styles array in "angular.json" will look something like this:

 "styles": [    "src/styles.scss"],

We are using the "SCSS" format so we change it to the following:

"styles": [    "node_modules/bootstrap/scss/bootstrap.scss",

    "src/styles.scss"

],

 

 

If you are using the "CSS" format change it to the following:

"styles": [    "node_modules/bootstrap/dist/css/bootstrap.css",

    "src/styles.scss"

],

 

Because we have changed "angular.json, we need to run "ng serve" again. The App should now look like this if Bootstrap is integrated correctly:

Adding Bootstrap has changed the look of the App slightly, but we need a menu that actually uses Bootstrap CSS classes in order to really see what Bootstrap can do. Our new menu is going to use Angular as well as Bootstrap so we will need to make changes in all three of the "navmenu.component" files.

Edit navmenu.component.ts

We need to add one property and one method to the "navmenu.component.ts" file. Add the following above the constructor:

  navbarOpen = false;

  toggleNavbar() {

    this.navbarOpen = !this.navbarOpen;

  }

Edit the navmenu html

Now paste the following into "navmenu.component.html" to completely replace the existing contents:

Over-ride Bootstrap in the CSS file

Although we love Bootstrap we are always going to want to make a few customisations to get our own look and feel going in our App. We can do this by putting some CSS code into the "navmenu.component.scss" file:

.container{
    margin-bottom:15px;
}
.bg-primary {
  background-color: #030A8C !important;
}
.menu-background {
  background-color: #030A8C;
}

Wrap up

We've now added Bootstrap to our basic Angular 9 App. We also changed the menu component to use Bootstrap and a bit of Angular. TheApp should now look like this:

If you got lost you can access the git repository here 

Next

Now we are going to use Angular CLI to add a service and connect components to it. 

 

---