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.