How to install Bootstrap in Angular
source link: https://www.laravelcode.com/post/how-to-install-bootstrap-in-angular
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to install Bootstrap in Angular
Bootstrap is CSS framework which has predefined class with Javascript plugins such as modal, collaps, carousel etc to make responsive webdesign.
In this article, we will see how we can install bootstrap in Angular and use it. We will install current latest bootstrap version 5 in Angular 12.
There is two way, you can install and use Bootstrap in Angular. We will see both the ways one by one.
Install from npm package
First way, we install Bootstrap using npm package manager. Run the following command and it will install Bootstrap into node_module directory.
npm install bootstrapIf the installation failed due to permission error, you may need to run command with supo permission in Linux system.
sudo npm install bootstrapNow in the root angular.json file, add Bootstrap css file in "styles" array and js file in "scripts" array as follow.
{
"projects": {
"boots": {
"architect": {
"build": {
"options": {
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
}
}
}
}
}
}Now run the Angular server again and you can add Boostrap classes to add CSS and Bootstrap components.
Using CDN
The second way is to use CDN files into main layout view. Put the below stylesheet into your <head> tag before all other stylesheets to load.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">And if you want to use Bootstrap component, then you need to include Bootstrap js file. Add the following <script> tag before the closing </head> tag.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>Here is the default Angular index.html file with Bootstrap.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Boots</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>This way, you don't need to download Bootstrap source files into your project.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK