Using Bootstrap 4 with Angular 4|5

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 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

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

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.

You can also use the ngx-bootstrap library

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

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.