Depending on your preference there are several methods to add bootstrap styling to Angular 6 app.
Method 1: This is the simplest way using CDN links for bootstrap core files and required Javascript.
Get bootstrap compiled assets: https://getbootstrap.com/docs/4.0/getting-started/download/#bootstrapcdn.
Copy the links to the main app file or index.html of your angular project as shown below
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My Demo Angular App</title> <base href="/"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </html>
Save and you are done! Remember that bootstrap 4 needs Popper JavaScript library to work. You have to add the link before bootstraps own JavaScript file.
Method 2: Install bootstrap, jquery and popper (required for bootstrap 4) using node packet manager (npm).
Run the following command
npm install bootstrap jquery popper.js
Optionally you can also install font-awesome to go with bootstrap theme.
npm install font-awesome
Once installed, all these dependencies are available in node_modules folder of your application directory.
Next open angular.json file located in your application root. (previously it was angular-cli.json)
Find the “styles” and “scripts” tags and place the following code:
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.css", "../node_modules/font-awesome/css/font-awesome.css", "styles.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/popper.js/dist/popper.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ],
Save and you are ready to use bootstrap on your angular project!
Copyright Web/ Design/ Vista 2022 ©