How to Add Bootstrap to Angular

In this guide, we will show you how to add Bootstrap to the Angular app. This tutorial uses Bootstrap 4 & Angular 9. We will show you how to install the bootstrap CSS. We also show you how to add ng-bootstrap & ngx-bootstrap two most popular Angular implementation of the Bootstrap using the Angular CLI commands.

What is Bootstrap

The bootstrap is a responsive mobile-first CSS framework for building Web Applications. It is open source and has all the features like Sass variables, mixins, responsive grid system, prebuilt components, and powerful JavaScript plugins.

Bootstrap consists of few CSS files & JS files.

The CSS files contains all the styles definitions.

Many of bootstrap components require the use of JavaScript to function. For Example, carousels, drop-down menus, auto-suggest, etc require bootstraps.js file. It also has depedency on jQuery, Popper.js.

Create a new Angular Application

Create a new Angular Application bootstrap-example, as shown below. Use the Angular CLI Command ng new.

Open the app.component.html and add the following code. The example bootstrap code is from the Hoverable rows

Run the app. Note that we have not yet added the bootstrap CSS. This will render the HTML table without any styles as shown below.

Adding Bootstrap CSS File

If you are not using any of the components that use JavaScript, then you do not need to install JS files. There are a few ways in which you can add the CSS Files.

We can install the Bootstrap CSS file in one of the following ways

1. Use the CSS file from a CDN
2. Copy the bootstrap.min.css file to a local folder
3. Install the bootstrap npm package

Once installed, you can include it in the app by using the one of the methods

1. Add it in Index.html using the link tag
2. Include it in angular.json
3. Import it in styles.css

Add Bootstrap using the CDN

Open the index.htmland add the following code. The link to the latest version of bootstrap CSS

The index.html is as shown below.

Now run the app, and you should be able to see tables rendered as shown in the Hoverable rows example.

Alternatively, you can use the @import directive in the styles.css file

Install the bootstrap package

This is the recommended way of installing bootstrap CSS files.

Instead of running from CDN, you can install the CSS Files locally. The correct way to do this is by installing the bootstrap package.

Run the following npm command to install bootstrap. This will install the latest version of the bootstrap which is bootstrap 4.3.1 right now.

Running the above command will copy the bootstrap files to the node_modules/bootstrap folder. But it will not include it in the app.

Open the angular.json file and locate the projects -> Bootstrap-example (our project name) -> architect -> build -> styles node.

Alternatively you can just add the @import directive to import it in the styles.css

Copy CSS file Local folder

You can manually copy the CSS files to any of local folder.

Assets folder

Copy the bootstrap.min.css to the src/assets folder. The Angular CLI includes all the files from the assets folder to the distribution folder (i.e dist/assets folder).

Hence, you can add it in the index.html as shown below. Note that the path must be with reference to the index.html.

or Include it under styles node in angular.json.

Or import it in styles.css.

Other folders

You can also copy it to any other folder other than the assets folder.

For example copy bootstrap.min.css to the root folder i.e src folder.

You can add it in the styles node in angular.json

or import it in the styles.css

You can also configure angular.json to copy the file to the distribution folder and link it in the index.html

Adding Bootstrap CSS & JS File

The above methods add only the bootstrap CSS Files. But bootstrap also comes with bootstrap.js file, which also depends on jQuery, Popper.js. You can also include them in the index.html, but it is not the Angular way as they manipulate the DOM directly and can interfere with the working of the Angular

There are two Angular specific bootstrap libraries available, which does the work in Angular way. One is ng-bootstrap & the other one is ngx-bootstrap

There is not much difference between these two packages. The ngx-bootstrap has animation built into it and also supports bootstrap3. The ng-bootstrap supports only bootstrap 4. The date picker component in the ng-bootstrap uses the object while ngx-bootstrap uses string, which is much easier to use. More at what is the difference between ng-bootstrap & ngx-bootstrap

Installing ng-bootstrap

ng-bootstrap supports only Bootstrap 4 CSS and does not have dependencies on 3rd party JavaScript.

You can use npm command to install ng-bootstrap but the recommended way is to use the Angular CLI . i.e. using the ng command instead of npm command.

Using Angular CLI to install ng-bootstrap

The above command

1. Installs ng-bootstrap.
2. Installs bootstrap.
3. Updates the package.json
4. Updates angular.json to use the bootstrap.min.css
5. Imports the NgbModule in app.module.ts and add it in the imports array
6. Updates the src/polyfills.ts

Here are the list of changes

package.json

angular.json

app.module.ts

src/polyfills.ts

Using npm to install ng-bootstrap

If you use npm then you need to install both ng-bootstrap/ng-bootstrap & also bootstrap as shown below

And then makes changes to the package.json, angular.json, app.module.ts & src/polyfills.ts as shown in the previous section.

Using ng-bootstrap

The ng-bootstrap comes with a lot of components. You can refer to the list of ng-bootstrap components

The following is the code from ngbDropdown component from the drop down example. Add it into the app.component.html

Reference

• Home
• GitHub
• npm
• Demo site

Installing ngx-bootstrap

ngx-bootstrap allows us to use both bootstrap 3 & 4. We can use the ether ng or npm command to install the ngx-bootstrap as shown below.

Using Angular CLI to install ngx-bootstrap

The command installs the ngx-bootstrap & bootstrap 4. It also updates the package.json, angular.json & app.module.ts. The following are a list of changes in each file.

package.json

angular.json

app.module.ts. Note that BrowserAnimationsModule module is added & imported as it uses it extensively. Also note that no ngx-bootstrap related modules are added.

Using npm to install ngx-bootstrap

The above command installs the ngx-bootstrap with bootstrap 4. You also need to make changes to the file angular.json & app.module.ts as shown in the previous section.

Using ngx-bootstrap

The ngx-bootstrap comes with a lot of components. You can refer to the list of ngx-bootstrap components.

The following code shows how to use the dropdowns component.

Each component in ngx-bootstrap comes with its own module. We need to import it in our root module to use it. Open the app.module.ts and import the BsDropdownModule from the ngx-bootstrap/dropdown. And also include it in the imports array using the BsDropdownModule.forRoot()

Now, open the app.component.html

Run the app and you should see the button dropdown as shown in this document

Reference

• Home
• GitHub
• npm
• Documentation

Summary

We look at various ways to add the bootstrap in Angular. We also learned how to add bootstrap via ng-bootstrap & ngx-bootstrap libraries.