Integrate Bootstrap into Angular

Introduction

        How to integrate Bootstrap into Angular project in the visual studio 2022 community.

Environment

• Visual Studio 2022 Community
• Bootstrap 5

Content

Step 1: Create a new "Standalone TypeScript Angular Project" in Visual Studio 2022 Community

        I named it BootstrapIntoAngular.

Step 2: install bootstrap into the solution

        In the project directory input the below command to install bootstrap5 into the current node_modules directory.

npm install --save bootstrap@5

Step 3: Modify "angular.json" file

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

Last step: Example Using Bootstrap, Then Run the Project

        Change "app.component.html" likes below

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>