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:

Angular bootstrap

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