Use Bootstrap 4 with Angular Project

Angular featured image

1. Overview

Bootstrap and Angular integration

Bootstrap became the most popular front-end components library, for building responsive Web UI using html, css and js.

In this article, I will show you how to integrate Bootstrap 4 in Angular project.

2. Implementation

1. First, install bootstrap, font-awsome, popper.js and jquery modules using npm install command.

npm install --save popper.js jquery font-awesome bootstrap

jquery and popper.js are required for bootstrap 4.

2. Add the following styles and scripts to the .angular-cli.json, Webpack will take care of bundling them.


	"apps": [

			"styles": [
			"scripts": [


Now you are able to use Bootstrap 4 Component inside your Angular project.

3. To make sure everything is well integrated, add a Bootstrap 4 component to your app.component.html and run ng serve.

<!-- app.component.html -->

<div class="container">
    <div class="row">
        <div class="card mx-auto">
            <div class="card-header">Card header</div>
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Card description here...</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>

If everything goes well, your component will be rendered and displayed on the browser without problem.

Bootstrap 4 Angular test

Find the source code of this example in GitHub.


Leave a Reply


This site uses Akismet to reduce spam. Learn how your comment data is processed.

Notify of