Add Bootstrap to Angular Application
In this post you will Learn 2 methods to add Bootstrap to your Angular application.
So lets start with the first and the most easiest one.
Method 1
In this method first you have to copy the below stylesheet <link> into your <head> section of index.html file before all other stylesheets to load our CSS
Css
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
Javascript
Now Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them. either way is you could also place it in the <head> section just like we did for stylesheets.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
Save your Index.html File and check if bootstrap works by using any bootstrap template.
Method 2
In this method you have to install Bootstrap package using npm and then import its code in to your angular application.
Run this command in terminal of your project root directory.
npm install bootstrap
This will install all bootstrap related files in your node_modules folder. Now you have to import these files in to your application copy the below lines of code in angular.json file.
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.js"
]
Hope you have successfully Installed Bootstrap in your Application.
Happy Coding!
