Integrate Bootstrap into Angular

最新推荐文章于 2026-06-18 21:05:44 发布

原创最新推荐文章于 2026-06-18 21:05:44 发布 · 897 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#angular.js #bootstrap #前端

收录于

本文介绍了如何在VisualStudio2022Community版中创建一个新的TypeScriptAngular项目，并安装Bootstrap5。步骤包括使用npm安装Bootstrap，修改`angular.json`文件以引入Bootstrap样式，以及在`app.component.html`中使用Bootstrap布局示例。

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>