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