您现在的位置是:首页 >其他 >Integrate Bootstrap into Angular网站首页其他

Integrate Bootstrap into Angular

kagula086 2023-06-30 20:00:02
简介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>

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。