Frontend State Management with Angular and NGRX : Integrating Bootstrap into Angular Applications

Integrating Bootstrap into Angular Applications

Next step, we will integrate the bootstrap framework into our application.  Bootstrap remains one of the most common CSS frameworks and there are easy and different ways to integrate it into your application. 

 npm install bootstrap
 // If your prefer yarn 
 yarn add bootstrap

 After installation, we have a few choices importing bootstrap into our application. Below two of the methods are illustrated.

Method 1

Import bootstrap in index.html  of our root folder. 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FnnAngularBase</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Method 2

Import the bootstrap into styles.css which is found in the root src folder of our application.  We make sure to import it as the first item in this file. 

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

This file is already configured to be bundled with our angular application.

 

;


course logo
Frontend State Management with Angular and NGRX
Number of sections:
12
Content length:
Delivery formats:
Frontend State Management with Angular and NGRX