11/08/2024, 12:27 How to Add Bootstrap to an Angular Application

Forum Donate

Learn to code — free 3,000-hour curriculum

JUNE 6, 2022 / #BOOTSTRAP

How to Add Bootstrap to an

Angular Application
Rodrigo Kamada

In this article, we'll build a web application using the

latest version of Angular. Then we'll add the Bootstrap
CSS framework which provides rich and responsive
interface components.

Let's get started.

Prerequisites
https://www.freecodecamp.org/news/how-to-add-bootstrap-css-framework-to-an-angular-application/ 1/10
11/08/2024, 12:27 How to Add Bootstrap to an Angular Application

Before you start, you need to install and configure theForum

tools below Donate
to create the Angular application.
Learn to code — free 3,000-hour curriculum

Git: Git is a distributed version control system and we'll use it

to sync the repository.

Node.js and npm: Node.js is a JavaScript code runtime

software based on Google's V8 engine. npm is a package
manager for Node.js (Node Package Manager). We'll use
these tools to build and run the Angular application and
install the libraries.

Angular CLI: Angular CLI is a command line utility tool for

Angular and we'll use it to create the base structure of the
Angular application.

An IDE (like Visual Studio Code or WebStorm): an Integrated

Development Environment is a tool with a graphical
interface that helps you develop applications. We'll use one
to develop our Angular application.

How to Create the Angular

application
Angular is a development platform for building web, mobile, and
desktop applications using HTML, CSS and TypeScript (JavaScript).
Currently, Angular is at version 13 and Google is the main
maintainer of the project.

Bootstrap is an open source CSS framework that has many

components for building responsive web interfaces.

Let's create the application with the Angular base structure using
the @angular/cli with the route file and the SCSS style format.

https://www.freecodecamp.org/news/how-to-add-bootstrap-css-framework-to-an-angular-application/ 2/10
11/08/2024, 12:27 How to Add Bootstrap to an Angular Application

ng new angular-bootstrap
Forum Donate
? Would you like to add Angular routing? Yes
Learn to code — free 3,000-hour curriculum
? Which stylesheet format would you like to use? SCSS [ https:/
CREATE angular-bootstrap/README.md (1062 bytes)
CREATE angular-bootstrap/.editorconfig (274 bytes)
CREATE angular-bootstrap/.gitignore (604 bytes)
CREATE angular-bootstrap/angular.json (3273 bytes)
CREATE angular-bootstrap/package.json (1079 bytes)
CREATE angular-bootstrap/tsconfig.json (783 bytes)
CREATE angular-bootstrap/.browserslistrc (703 bytes)
CREATE angular-bootstrap/karma.conf.js (1434 bytes)
CREATE angular-bootstrap/tsconfig.app.json (287 bytes)
CREATE angular-bootstrap/tsconfig.spec.json (333 bytes)
CREATE angular-bootstrap/src/favicon.ico (948 bytes)
CREATE angular-bootstrap/src/index.html (302 bytes)
CREATE angular-bootstrap/src/main.ts (372 bytes)
CREATE angular-bootstrap/src/polyfills.ts (2820 bytes)
CREATE angular-bootstrap/src/styles.scss (80 bytes)
CREATE angular-bootstrap/src/test.ts (743 bytes)
CREATE angular-bootstrap/src/assets/.gitkeep (0 bytes)
CREATE angular-bootstrap/src/environments/environment.prod.ts (51
CREATE angular-bootstrap/src/environments/environment.ts (658 byt
CREATE angular-bootstrap/src/app/app-routing.module.ts (245 bytes
CREATE angular-bootstrap/src/app/app.module.ts (393 bytes)
CREATE angular-bootstrap/src/app/app.component.scss (0 bytes)
CREATE angular-bootstrap/src/app/app.component.html (23809 bytes)
CREATE angular-bootstrap/src/app/app.component.spec.ts (1090 byte
CREATE angular-bootstrap/src/app/app.component.ts (222 bytes)
✔ Packages installed successfully.
Successfully initialized git.

Now we need to install the bootstrap and bootstrap-icons

libraries that contain the files with Bootstrap's styles and JavaScript
code like this:

npm install bootstrap bootstrap-icons

After install, we will configure the bootstrap and bootstrap-icons

libraries. Change the angular.json file and add the

https://www.freecodecamp.org/news/how-to-add-bootstrap-css-framework-to-an-angular-application/ 3/10
11/08/2024, 12:27 How to Add Bootstrap to an Angular Application

bootstrap.scss , bootstrap-icons.css and Forum Donate

bootstrap.bundle.min.js files as below:
Learn to code — free 3,000-hour curriculum

"styles": [
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/bootstrap-icons/font/bootstrap-icons.css",
"src/styles.scss"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

Now we will install the @ng-bootstrap/ng-bootstrap library which

contains native Angular support:

npm install @ng-bootstrap/ng-bootstrap@next

After install, we will import the NgbModule module. Change the

app.module.ts file and add the lines as below:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

imports: [
BrowserModule,
NgbModule,
AppRoutingModule,
],

Now we will remove the contents of the AppComponent class from

the src/app/app.component.ts file. Import the NgbModal service
and create the open method to open a modal as below.

https://www.freecodecamp.org/news/how-to-add-bootstrap-css-framework-to-an-angular-application/ 4/10
11/08/2024, 12:27 How to Add Bootstrap to an Angular Application

Forum Donate
import { Component } from '@angular/core';
import { NgbModal
Learn to} code
from—'@ng-bootstrap/ng-bootstrap';
free 3,000-hour curriculum

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {

constructor(private modalService: NgbModal) {

}

public open(modal: any): void {

this.modalService.open(modal);
}

Next we will remove the contents of the

src/app/app.component.html file. Add some components in the
HTML to view and test the components as below.

<nav class="navbar navbar-expand-sm navbar-light bg-light">

<div class="container-fluid">
<a class="navbar-brand" href="#">
<h1>Angular Bootstrap</h1>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedCont
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbar
Dropdown
</a>
https://www.freecodecamp.org/news/how-to-add-bootstrap-css-framework-to-an-angular-application/ 5/10
11/08/2024, 12:27 How to Add Bootstrap to an Angular Application

<ul class="dropdown-menu" aria-labelledby="navbarDropdo

Forum Donate
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action<
Learn to code — free 3,000-hour curriculum
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" ari
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholde
<button class="btn btn-outline-success" type="submit">Sea
</form>
</div>
</div>
</nav>
<div class="container-fluid py-3">
<div class="row my-3">
<div class="col">
<label for="exampleFormControlInput1" class="form-label">Em
<input type="email" class="form-control form-control-sm" id
</div>
</div>
<div class="row my-3">
<div class="col">
<label for="exampleFormControlTextarea1" class="form-label"
<textarea class="form-control form-control-sm" id="exampleF
</div>
</div>
<div class="row my-3">
<div class="col">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexS
<label class="form-check-label" for="flexSwitchCheckDefau
</div>
</div>
</div>
<div class="row my-3">
<div class="col">
<button class="btn btn-sm btn-outline-primary" (click)="ope
</div>
</div>
</div>

<ng-template #demoModal let-modal>

<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Profile update

https://www.freecodecamp.org/news/how-to-add-bootstrap-css-framework-to-an-angular-application/ 6/10
11/08/2024, 12:27 How to Add Bootstrap to an Angular Application

<button type="button" class="btn-close" data-bs-dismiss="moda

Forum Donate
</div>
<div class="modal-body">
Learn to code — free 3,000-hour curriculum
<form>
<div class="form-group">
<label for="dateOfBirth">Date of birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth" class="form-
<button type="button" class="btn btn-outline-secondary
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="m
</div>
</ng-template>

Finally, we will run the application with the command below:

npm start

> [email protected] start

> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files | Names | Size

vendor.js | vendor | 3.38 MB
styles.css | styles | 255.86 kB
polyfills.js | polyfills | 128.56 kB
scripts.js | scripts | 76.94 kB
main.js | main | 22.81 kB
runtime.js | runtime | 6.59 kB

| Initial Total | 3.86 MB

Build at: 2021-06-27T21:28:22.756Z - Hash: 122b9fa4d57b962e7bcc -

** Angular Live Development Server is listening on localhost:4200

✔ Compiled successfully.

https://www.freecodecamp.org/news/how-to-add-bootstrap-css-framework-to-an-angular-application/ 7/10
11/08/2024, 12:27 How to Add Bootstrap to an Angular Application

Forum Donate
Ready! We will access the URL at http://localhost:4200/ and
check if the application is working.
Learn to code You can see
— free 3,000-hour the application
curriculum
working on GitHub Pages and Stackblitz.

The application repository is available at

https://github.com/rodrigokamada/angular-bootstrap.

Conclusion
Let's summarize what we covered in this article:

We created an Angular application.

We added some Bootstrap CSS framework components.

You can use this article to create rich and responsive applications
that provide a better user experience and greater usability.

Thank you for reading and I hope you enjoyed the article!

This tutorial was posted on my blog in Portuguese.

To stay updated whenever I post new articles, follow me on Twitter.

https://www.freecodecamp.org/news/how-to-add-bootstrap-css-framework-to-an-angular-application/ 8/10
11/08/2024, 12:27 How to Add Bootstrap to an Angular Application

Rodrigo Kamada Forum Donate

👨‍💻 Software Developer | ✍️ Technical Content Creator | 🤝 Open Source
🎙️ code
Learn|to
Contributor | 👨‍🏫 Mentor
— free
Speaker | 🙌 Ambassador
3,000-hour curriculum| ☁️ AWS
Community Builder

If you read this far, thank the author to show them you care.
Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has

helped more than 40,000 people get jobs as developers.
Get started
ADVERTISEMENT

BenQ Indi
Showcase Your C
BenQ Coding M

BenQ India

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States

Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of
videos, articles, and interactive coding lessons - all freely available to the public.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers,
services, and staff.

You can make a tax-deductible donation here .

https://www.freecodecamp.org/news/how-to-add-bootstrap-css-framework-to-an-angular-application/ 9/10
11/08/2024, 12:27 How to Add Bootstrap to an Angular Application

Forum Donate
Trending Guides
Learn to code — free 3,000-hour curriculum
Learn CSS Transform Build a Static Blog Build an AI Chatbot
What is Programming? Python Code Examples Open Source for Devs
HTTP Networking in JS Write React Unit Tests Learn Algorithms in JS
How to Write Clean Code Learn PHP Learn Java
Learn Swift Learn Golang Learn Node.js
Learn CSS Grid Learn Solidity Learn Express.js
Learn JS Modules Learn Apache Kafka REST API Best Practices
Front-End JS Development Learn to Build REST APIs Intermediate TS and React
Command Line for Beginners Intro to Operating Systems Learn to Build GraphQL APIs
OSS Security Best Practices Distributed Systems Patterns Software Architecture
Patterns

Mobile App

Our Charity

About Alumni Network Open Source Shop Support Sponsors Academic Honesty

Code of Conduct Privacy Policy Terms of Service Copyright Policy

https://www.freecodecamp.org/news/how-to-add-bootstrap-css-framework-to-an-angular-application/ 10/10