how to add bootstrap in angular cli
How to Add Bootstrap in Angular CLI
Introduction
Bootstrap is a widely-used CSS framework that makes it easy to create responsive and attractive web pages. Angular CLI is a command-line interface that simplifies the process of creating and managing Angular applications. In this blog post, we will explore how to add Bootstrap to an Angular CLI project.
Step-by-Step Guide
- First, we need to install Bootstrap as a dependency in our project. We can do this using the following command in our terminal:
npm install bootstrap
- Once the installation is complete, we need to import the Bootstrap CSS and JavaScript files into our project. We can do this by adding the following lines to the
styles
andscripts
arrays in our.angular-cli.json
file:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
]
- Finally, we need to tell Angular CLI to include these files when building our project. We can do this by adding the following line to the
assets
array in our.angular-cli.json
file:
{
"glob": "**/*",
"input": "../node_modules/bootstrap/dist/fonts",
"output": "./fonts/"
}
- Save the changes to the
.angular-cli.json
file and restart the development server using the following command in our terminal:
ng serve
Alternative Methods
- You can also use the Angular Bootstrap library (ng-bootstrap) instead of the regular Bootstrap library. This library provides Angular-specific components that are easier to use and integrate with your Angular project. You can install it using the following command:
npm install --save @ng-bootstrap/ng-bootstrap
- If you prefer to use a CDN instead of downloading the Bootstrap files, you can add the following lines to your
index.html
file:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Conclusion
By following these steps, you should now have Bootstrap up and running in your Angular CLI project. Whether you choose to use the regular Bootstrap library or the ng-bootstrap library, you can now easily add attractive and responsive UI elements to your Angular applications.