Using Bootstrap 4 with Angular 7/8

In this tutorial we will see how to use Bootstrap to style apps built using the Angular 8 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.

Bootstrap is the most popular HTML and CSS framework for building responsive layouts with ease and without having a deep knowledge of CSS (Still 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).

Installing Angular CLI 8

So let's get started by installing the Angular CLI 6 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 Angular CLI (Version 8 as of this writing)

$ npm install -g @angular/cli@latest

This will install the CLI 8 globally so depending on your npm configuration you may need to add sudo (for superuser access).

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

$ ng new ngbootstrap4

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 ngbootstrap4

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

$ ng serve

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

Adding Bootstrap 4 to Angular 8

Now head back to your terminal and install Bootstrap 4 via npm:

 $ npm install --save bootstrap

This will also add the bootstrap package to package.json.

The 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.json file

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

Adding Bootstrap 4 Using ng-bootstrap and ngx-bootstrap

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

Bootstrap 4 Angular 8

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 the Bootstrap 4 CSS file to be present.

You can add it in the styles array of the angular.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 Bootstrap 4 Angular 8

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

Adding Bootstrap 4 to Angular 8

Thanks to the new ng add command added on Angular 7+, you have a new simpler and easier way to add Bootstrap without using the npm install command for installing the required dependencies or adding any configurations.

You can simply run the following command to add ng-bootstrap:

$ ng add @ng-bootstrap/schematics

That's it. You now have support for Bootstrap components and styles without any extra configurations. You also don't need jQuery since we are using ng-bootstrap.

Conclusion

In this article, we've seen different ways of including Bootstrap 4 in Angular 8 apps:

  • Using original Bootstrap 4 assets from npm
  • Using the ng-bootstrap library
  • And finally using the ngx-bootstrap

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

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status