Using Bootstrap 4 with Angular 4|5
Tags: javascript, angular, bootstrap
Published: 2018-04-18 21:43:03

---
title: "Using Bootstrap 4 with Angular 4|5"
published: true
tags: javascript, angular, bootstrap
canonical_url: https://www.techiediaries.com/angular-bootstrap/
---

Bootstrap is the most popular HTML and CSS framework for building responsive layouts with ease and without having a deep knowledge of CSS (but custom CSS is required to customize your design ane make it different from the other Bootstrap-styled websites unless you are using a BS theme developed specifically for you).

Bootstrap 4 is the latest version of BS which brings many new and powerful features to the framework most importantly Flexbox which is now the default display system for BS grid layout (one of the most important features of BS).

In this tutorial we will see how to use Bootstrap to style websites built using the Angular 5 framework. We'll see how we can easy integrate both of them, using `ng-bootstrap` vs. `ngx-bootstrap` packages and using the Angular CLI for generating a brand new project.

So let's get started by installing the [Angular CLI](https://cli.angular.io/) in case it's not yet installed on your system.

Head over to your terminal or command prompt then run the following command to install the latest version of the CLI

```
$ npm install -g @angular/cli@latest
```

This will install the CLI globally so depending on your _npm_ configuration you may need to add _sudo_ (for admin access).

After the installation you'll have at your disposal the _ng_ utility. Let's use it to generate a new Angular 5 project.

```
$ ng new ng5bootstrap4
```

This will generate the directory structure and necessary files for the project and will install the dependencies.

Next navigate inside the root folder of the newly created project

```
cd ng5bootstrap4
```

You can then serve your Angular 5 application using the `ng serve` command:

```
ng serve
```

Your app will be served from `http://localhost:4200/`

Now head back to your terminal then install Bootstrap 4 via npm

```
$ npm install --save bootstrap
```

This will also add the _bootstrap_ to `package.json`.

Bootstrap 4 assets get installed inside the the `node_modules/bootstrap` folder so you'll need to include the CSS files at the head of your app main HTML file or also with an _@import_ in `style.css`

```
@import "~bootstrap/dist/css/bootstrap.css"
```

Please note that Bootstrap 4 depends on jQuery and Popper.js libraries and since we are not including them any Bootstrap components that rely on JavaScript will not work. So why not include those libs? For Angular it's better to avoid using libraries that make direct manipulation of the DOM (like jQuery) and let Angular handle that.

Now what if you need the complete features of Bootstrap 4?

You have different ways either include jQuery, `Popper.js` and `bootstrap.js`, which is not recommend, using the scripts array in the `.angular-cli.json` file

```
"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/popper.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],
```

Another better alternative way is to use component libraries created for the sake of making Bootstrap work seamlessly with Angular such as `ng-bootstrap` or `ngx-bootstrap`

![](https://screenshotscdn.firefoxusercontent.com/images/de17d764-f3f2-41df-b3d4-3bdf838c306e.png)

> Should I add bootstrap.js or bootstrap.min.js to my project? No, the goal of ng-bootstrap is to completely replace JavaScript implementation for components. Nor should you include other dependencies like jQuery or popper.js. It is not necessary and might interfere with ng-bootstrap code [Source](https://ng-bootstrap.github.io/#/getting-started)

So first you'll need to install the library from npm using the following command:

```
npm install --save @ng-bootstrap/ng-bootstrap
```

Once you finish the installation you'll need to import the main module.

```
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
```

Next you'll need to add the module you imported in your app root module

```
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [/*...*/],
  imports: [/*...*/, NgbModule.forRoot()],
  /*...*/
})
export class AppModule {
}
```

Please note that `ng-bootstrap` requires Bootstrap 4 CSS file to be present.

You can add it in the styles array of the `.angular-cli.json` file like that:

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

Now you can use Bootstrap 4 in your Angular application.

You can find all the available components via this [link](https://ng-bootstrap.github.io/#/components/accordion/examples).

You can also use the `ngx-bootstrap` library ![](https://screenshotscdn.firefoxusercontent.com/images/3d5b00ef-736b-4657-9fe6-39548985495a.png)

Simply head back to your terminal, make sure you are inside your Angular project then run the following command to install `ngx-bootstrap`

```
npm install ngx-bootstrap --save
```

You also need the Bootstrap 4 CSS files. Add the following line in the `<head>` of your Angular app which includes Bootstrap from a CDN

```
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
```

You can also install bootstrap from npm and use the previous way to include the CSS file (via the styles array in the `angular-cli.json` file)

```
"styles": [  
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",  
   "styles.css"  
   ],
```

Next open `src/app/app.module.ts` and add

```
import { BsDropdownModule} from 'ngx-bootstrap/dropdown';
import { AlertModule } from 'ngx-bootstrap';

/*...*/

@NgModule({
   /*...*/
   imports: [BsDropdownModule.forRoot(),AlertModule.forRoot(), /*...*/],
    /*...*/ 
})
```

This an example of importing two components _BsDropdownModule_ and _AlertModule_.

You need to import the module for each component you want to use in the same way.

`ngx-bootstrap` provides each BS component in each own module so you only import the components you need. In this way your app will be smaller since it bundles only the components you are actually using.

You can find all the available components that you can use from the [docs](https://valor-software.com/ngx-bootstrap/#/getting-started)

## Conclusion

In this article we've seen different ways of including Bootstrap 4 in Angular 5 apps: Using original Bootstrap 4 assets from npm, using the `ng-bootstrap` library and finally using the `ngx-library`.

If you want to compare `ng-bootstrap` vs. `ngx-library` the most important point is how `ngx-library` uses separate modules for components to reduce the final app size.