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

Software Craftsmanship, Stackextend author and Full Stack developer with 6+ years of experience in Java/Kotlin, Java EE, Angular and Hybris…
I’m Passionate about Microservice architectures, Hexagonal architecture, Event Driven architecture, Event Sourcing and Domain Driven design (DDD)…
Huge fan of Clean Code school, SOLID, GRASP principles, Design Patterns, TDD and BDD.