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#

1. 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

1. 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 and scripts 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"
  ]

1. 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/"
}

1. 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.