Angular Application using Bootstrap Framework

While working on an Angular application, we may sometimes need functionalities available on a Bootstrap framework, either the complete library or some of the functionalities, like grid layout system, utilities, etc.,

We can either use the CDN directly or install and use the Bootstrap framework as shown below.

Using Bootstrap CDN

We can directly include a CDN link within the index.html file as shown below.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js" integrity="sha512-1/RvZTcCDEUjY/CypiMz+iqqtaoQfAITmNSJY17Myp4Ms5mdxPS5UV7iOfdZoxcGhzFbOm6sntTKJppjvuhg4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SampleApp</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="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js" integrity="sha512-1/RvZTcCDEUjY/CypiMz+iqqtaoQfAITmNSJY17Myp4Ms5mdxPS5UV7iOfdZoxcGhzFbOm6sntTKJppjvuhg4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

Using Installed Bootstrap

Run any of the below commands within a terminal to install the bootstrap framework.

> npm install bootstrap --save
> npm install bootstrap
> npm i bootstrap

Link the installed bootstrap CSS files into the styles array of angular.json file as shown below.

"styles": [
    "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.css",
],

If we don't need the complete library, but some of the functionalities, like grid layout, utilities, etc., Then include only the respective CSS files as shown below.

"styles": [
    "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap-grid.css",
    "./node_modules/bootstrap/dist/css/bootstrap-utilities.css"
],

Using Bootstrap Components

In order to include a bootstrap component, add the respective HTML to the angular component as shown below.

<div class="container p-5">
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Primary</a></p>
    <p><a class="btn btn-success btn-sm" href="#" role="button">Success</a></p>
    <p><a class="btn btn-warning btn-xs" href="#" role="button">Warning</a></p>
</div>

How does it look on UI?

Run the angular application to see how the bootstrap component looks on the UI.

Conclusion

Now, we know how to install and use the Bootstrap framework in an Angular application.