How to Use Bootstrap 4 with Angular

Bootstrap is the most popular HTML, CSS, and Javascript framework for developing website and web applications.[tweetshare tweet=”Bootstrap is the most popular HTML, CSS, and Javascript framework for developing website $ web applications.” username=”DashBootstrap”]

Angular is a JavaScript based web application framework used for creating adynamic 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.

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.

Move to the folder where your application is located using the command

Now serve the application using the command

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

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 <link> tag.

In the index.html file include the Bootstrap CSS files using <link> tag within the <head> tag. And include Bootstrap JavaScript file using the <script> tag just before the closing <body> tag. The index.html file should look like the following.

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.

This code will generate the following output.

Example page using Angular and Bootstrap

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

After installation, you need to import ng-bootstrap’s main module. To do that add the following statement to app.module.ts file.

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.

Other modules in the application can simply import ngbModule as follows:

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

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

Typescript for the star rating

Typescript for progress bars

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