Use Bootstrap 4 with Angular Project

1. Overview

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": [
				"../node_modules/bootstrap/dist/css/bootstrap.min.css",
				"../node_modules/font-awesome/css/font-awesome.min.css",
				"styles.css"
			],
			"scripts": [
				"../node_modules/jquery/dist/jquery.min.js",
				"../node_modules/popper.js/dist/umd/popper.min.js",
				"../node_modules/bootstrap/dist/js/bootstrap.min.js"
			],
		
		}],

	...
}

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>
            </div>
        </div>
    </div>
</div>

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

Find the source code of this example in GitHub.

Mouad EL Fakir

Solution Architect with 10+ years of experience across full-stack development, DevOps, and enterprise software design. Expert in building scalable architectures, CI/CD pipelines, and internal developer platforms using tools like GitHub Actions, Terraform, Kubernetes (AKS), Azure, and Prometheus. Strong hands-on background in Java, Spring, Node.js, and event-driven systems (Kafka, Mulesoft). Passionate about developer experience, software quality, and platform engineering