Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation, and other interface components, as well as optional JavaScript extensions.
Below are some advantages of using Bootstrap
- Fewer Cross-browser bugs.
- Lightweight and customizable.
- Responsive structures and styles.
Let’s look at how we can add Bootstrap to Angular projects that most of us call angular bootstrap. First, we are going to create an Angular project.
Creating an Angular project using Angular CLI
ng new add-bootstrap
# Would you like to add Angular routing?
# Select n and Hit Enter.
get inside the project folder:
cd add-bootstrap
Now that our project has been created, let’s look at how we can add bootstrap to our project in 5 simple steps.
Step 1: Add Bootstrap to Angular Using index.html
We can add Bootstrap to our angular project by adding the Bootstrap CDN in our index.html file as a link. Open index.html in our project.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ChatApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
*<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">*
</head>
<body>
<app-root></app-root>
*https://code.jquery.com/jquery-3.4.1.slim.min.js
https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js
https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js*
</body>
</html>
Step 2: Install Bootstrap in your Angular project using NPM
We can add Bootstrap to our project through the installation.
Run the command below:
cd add-bootstrap
npm install bootstrap
We first navigate to our project in the command prompt before running the command for the installation.
Step 3: Add Bootstrap to Angular Using Style.css
We can add Bootstrap to our project by Importing bootstrap into our style.css file.
@import "~bootstrap/dist/css/bootstrap.min.css";
Step 4: Add Bootstrap to Angular Using angular.json
We can add the file paths to the styles and scripts array in file .angular-CLI.json:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Step 5: Usage of Bootstrap ng-bootstrap and ngx-bootstrap
Bootstrap depends on jQuery and Popper.js libraries, and if you don’t include them in your project, any Bootstrap components that rely on JavaScript will not work.
And can be added to your Angular project in the following way.
First by installing ng-bootstrap and ngx-bootstrap:
npm install --save @ng-bootstrap/ng-bootstrap
npm install --save ngx-bootstrap
Second import @ng-bootstrap.
After the installation of both dependences, we can now import them into our app.module.ts
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
Now that we have added bootstrap to our project using the above steps, let’s now write some code to test if it works.
Now let’s code
We are going to create a simple Homepage for texting. Open app.component.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand pl-5" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto pr-5">
<li class="nav-item active pl-3 pr-3">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item pl-3 pr-3">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown pl-3 pr-3">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid hero-page">
<div class="container">
<div class="row align-items-center" style="height: 60vh;">
<div class="col-6">
<h1>Showcase your app with Small Apps</h1>
<p>
Besides its beautiful design. Bootstrap is an incredibly rich core
framework for you to showcase your App.
</p>
</div>
</div>
</div>
</div>
<div class="container mt-5 pt-5 pb-5 mb-5">
<div
class="row align-items-center justify-content-around"
style="height: 60vh;"
>
<div class="col-3 card" style="height: 60vh;">
<img
class="card-img-top"
src="../../assets/phone 2.png"
alt="Card image cap"
/>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div class="col-3 card" style="height: 60vh;">
<img
class="card-img-top"
src="../../assets/phone 2.png"
alt="Card image cap"
/>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div class="col-3 card" style="height: 60vh;">
<img
class="card-img-top"
src="../../assets/phone 2.png"
alt="Card image cap"
/>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
</div>
</div>
<footer class="bg-dark" style="min-height: 10vh;">
<div
class="row justify-content-center align-items-center p-0 m-0"
style="min-height: 10vh;"
>
<div class="col-12 text-center">
<p style="color: #fff;">Copyright © 2020</p>
</div>
</div>
</footer>
Open the app.component.scss and add the code.
.hero-page {
background: linear-gradient(rgba(0, 0, 0, 0.548), rgba(0, 0, 0, 0.548)),
url("../../assets/story-slider-01.jpg.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
width: 100%;
min-height: 80vh;
color: white;
font-size: 20px;
}
.hero-page h1 {
font-size: 50px;
font-weight: bolder;
margin-bottom: 30px;
line-height: 65px;
}
nav ul li a:hover {
color: #02225b;
}
nav a {
font-size: 20px;
font-weight: bolder;
}
nav a:hover {
color: #02225b;
}
The result can be seen below:

We have seen different ways of how can we add Bootstrap to Angular apps
Bonus Tips
You can use ready-made angular templates to save lots of time and at the same time, you can assure the highest quality. You can also check WrapPixel’s Angular Bootstrap Templates.
Related Article: How to use Bootstrap with Angular & Top 5 Free Angular Bootstrap Resources
This design is spectacular! You definitely know how to keep a reader entertained.
Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job.
I really enjoyed what you had to say, and more than that, how you presented it.
Too cool!
Oh my goodness! Impressive article dude! Thank you so much,
Hi there to every , for the reason that I am genuinely eager of reading
this weblog’s post to be updated on a regular basis.
It includes fastidious information.
My family always say that I am killing my time here at net,
except I know I am getting knowledge everyday
by reading such pleasant posts.
Best view i have ever seen !
Best view i have ever seen !