A2oz

How to Add Bootstrap in Angular in Visual Studio Code?

Published in Angular Development 2 mins read

Adding Bootstrap to your Angular project in Visual Studio Code is a straightforward process. You can achieve this through several methods, each offering its own advantages:

1. Using the Angular CLI

The Angular CLI provides a convenient way to integrate Bootstrap:

  1. Install Bootstrap: Open your terminal and run the following command:

    ng add bootstrap

  2. Import Bootstrap CSS: In your angular.json file, locate the styles array within the projects section and add the following line:

    "styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

  3. Restart your application: Run ng serve to rebuild and restart your Angular application.

2. Manually Including Bootstrap

If you prefer manual installation, follow these steps:

  1. Download Bootstrap: Visit the official Bootstrap website (https://getbootstrap.com/) and download the latest version of Bootstrap.

  2. Extract the files: Extract the downloaded Bootstrap files into your project's node_modules folder.

  3. Import Bootstrap CSS: In your angular.json file, add the following line to the styles array:

    "styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

  4. Restart your application: Run ng serve to rebuild and restart your Angular application.

3. Using a CDN (Content Delivery Network)

You can also include Bootstrap using a CDN:

  1. Add the CDN link: In your index.html file, add the following line within the <head> section:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  2. Restart your application: Run ng serve to rebuild and restart your Angular application.

4. Using npm (Node Package Manager)

Install Bootstrap using npm:

  1. Install Bootstrap: Open your terminal and run the following command:

    npm install bootstrap

  2. Import Bootstrap CSS: In your angular.json file, add the following line to the styles array:

    "styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

  3. Restart your application: Run ng serve to rebuild and restart your Angular application.

Note: You can choose any of these methods to add Bootstrap to your Angular project. The Angular CLI method is generally preferred for its simplicity and ease of use.

Related Articles