Working with Bootstrap in an Angular App

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.

Looking for Angular Templates?

Try our Angular Template and create stunning web applications for unlimited client projects and personal projects.
Start building web applications and products using our Free Angular Templates without any investment.

Below are some advantages of using Bootstrap

Fewer Cross-browser bugs.
Lightweight and customizable.
Responsive structures and styles.
Let look at how we can add Bootstrap in an angular project. * 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 look at how we can add bootstrap in our project in 5 simple steps.

Step 1: Adding Bootstrap 4 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: Installing Bootstrap 4 in your Angular project using NPM

We can add Bootstrap to our project by 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: Adding Bootstrap 4 to Angular Using Style.css

We can add Bootstrap in our project by Importing bootstrap in our style.css file.

@import "~bootstrap/dist/css/bootstrap.min.css";

Step 4: Adding Bootstrap 4 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: Using 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 is the following way.

First by installing ng-bootstrap and ngx-bootstrap:

npm install --save @ng-bootstrap/ng-bootstrap
npm install --save ngx-bootstrap
Second by import @ng-bootstrap.

After the installation of both dependences, we can now import it in 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 in our project using the above steps, let 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 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: