How to Use Bootstrap 4 with Angular

Bootstrap is the most popular HTML, CSS, and Javascript framework for developing website and web applications. Angular is a JavaScript based web application framework used for creating a dynamic websites.

Also Read: How to Use Bootstrap 4 With ReactJS

We can combine these two frameworks to quickly and easily develop amazing websites. Also, to create Bootstrap and Angular project we can use ng-bootstrap which has a set of angular directives that is based on Bootstrap which we will be discussing later in the article.

There are many websites that make use the power of Bootstrap and Angular to create stunning websites or web applications. For example, Kodable and Bizns.

How to use Bootstrap with Angular?
Let’s first create an Angular project using Angular CLI. Angular CLI is a command line tool that helps you create and scaffold angular projects easily.

Install Node.js and npm if not already installed on your computer. The install Angular CLI using the following command.

npm install -g @angular/cli
The installation may take a little time to complete. After the installation, we can use Angular CLI to create our applications. Use the following command to build a new application.

ng new myproject
Move to the folder where your application is located using the command

cd myproject
Now serve the application using the command

ng serve
The command ng serve –open will open the browser automatically with the greeting on your browser at http://localhost:4200/ as shown.

This page is running the app.component.html file in the src/app folder in your project folder. You can open the folder and make changes to the code and the browser will automatically reflect those changes.

So, you are set up with Angular.

Next, install Bootstrap. You need to include the Bootstrap CSS and JavaScript files into your project. You can install Bootstrap using the command

npm install bootstrap@4.0.0-alpha.6
Or you can download the source file or use CDN for Bootstrap.

If you are using CSS and JS file fro your local computer make sure that you include the file in your project folder or you have the correct path to the folder in the tag.

In the index.html file include the Bootstrap CSS files using tag within the tag. And include Bootstrap JavaScript file using the

Note: When using the CSS and JS files from the local computer make sure that you keep the CSS and JS files in the assets folder.

Now to begin coding with Angular and Bootstrap open the app.component.html file in src/app/app.component.html. Let's code using Bootstrap.

This code adds a navbar with a link and a row with contents in three columns.

Heading 1

This is the first column with some random content and a card.

This is the content within the card.

Heading 2

This is the second column with some random content and a card.

This is the content within the card.

Heading 3

This is the third column with some random content and a card.

This is the content within the card.

This code will generate the following output.

Example page using Angular and Bootstrap

ng-bootstrap is a repository that allows you to use Bootstrap with Angular without any dependency on jQuery or Bootstrap's JavaScript. ng-bootstrap is a repository that contains native Angular directives based on Bootstrap's HTML markup and CSS. The only dependencies required are:

Angular 4+, and
Bootstrap 4 CSS
After installing these dependencies, you can install ng-bootstrap as an npm package using the command

npm install --save @ng-bootstrap/ng-bootstrap
After installation, you need to import ng-bootstrap's main module. To do that add the following statement to app.module.ts file.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
Next, what you need to do is list the imported module to you application module as follows. For the root module, you need to call the forRoot() method.

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

declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent] })
export class AppModule {
Other modules in the application can simply import ngbModule as follows:

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

declarations: [OtherComponent, ...],
imports: [NgbModule, ...],
export class OtherModule {
Start Coding With ng-bootstrap
ng-bootstrap has many components that are already there in Bootstrap and some more. Go through the documentation and getting started page on ng-bootstrap to familiarize yourself with the components.

Let's try some of these components in an example

Star ratings using ng-bootstrap

Rate: {{currentRate}}

Fancy title

Progress bars using ng-bootstrap

Popovers that dismiss on the second click

For some of these components, you need to add the typescript in your component.ts file.

Typescript for the star rating

import {Component} from '@angular/core';

selector: 'ngbd-rating-template',
templateUrl: './rating-template.html',
styles: [`
.star {
font-size: 1.5rem;
color: #b0c4de;
.filled {
color: #1e90ff;
`] })
export class NgbdRatingTemplate {
currentRate = 6;
Typescript for progress bars

import {Component} from '@angular/core';

selector: 'ngbd-progressbar-basic',
templateUrl: './progressbar-basic.html',
styles: [`
ngb-progressbar {
margin-top: 5rem;
`] })
export class NgbdProgressbarBasic {
This code generates a page with three different tabs and a star rating, progress bars and popovers on each tab.

ng-bootstrap example - rating ng-bootstrap example - progressbar ng-bootstrap example - popover

Note: ng-bootstrap and ngx-bootstrap are two different projects created by two different teams. They are different but used for the same purpose. One of the main difference is that you can use ngx-bootstrap for both Bootstrap 3 and Bootstrap 4. ng-bootstrap is only for Bootstrap 4.

BootstrapDash believes in providing the best, efficient and quality free and premium bootstrap admin dashboard template to get your web application up and running easily and quickly. Visit our website to get to know more about our products. Want to create a stunning website of your own? Start learning

Leave a Reply

Your email address will not be published. Required fields are marked *