How to use Bootstrap 4 with Angular 8

How to use Bootstrap 4 with Angular 8

In this tutorial we will see how to use Bootstrap 4 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.

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/[email protected]

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.

Angular Bootstrap

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Angular Bootstrap Tutorial - Building Websites with Angular Bootstrap

In this Angular Bootstrap tutoria will help you learn to create beautiful websites easily using Bootstrap along with Angular. You'll learn: What is Angular? What is Bootstrap? Creating an Angular Application; Embedding Bootstrap with Angular

Angular 9 - Angular Smart Table Open Bootstrap 4 Modal Popup on button click

Angular 9 - Angular Smart Table Open Bootstrap 4 Modal Popup on button click. Angular smart table add custom button. Angular smart table dynamic data.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular 9 bootstrap 4.5 popup login form

Angular 9 bootstrap popup login form. Angular 9 bootstrap modal popup. Angular 9 bootstrap 4.5 popup login form. Angular bootstrap popup.