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.
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>
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.
This file is already configured to be bundled with our angular application.