Adding Bootstrap To Angular 11 Project With CLI

This tutorial will give you an example of angular 11 add bootstrap 4. it's a simple example of angular 11 install bootstrap 4. In this post, you learn to install bootstrap in angular 11.

As we know Bootstrap is the world’s most popular framework for building responsive, and mobile-first websites. I show you how to add bootstrap in angular 11 project
You can easily create your angular app using the below command: (How To Install Angular And Set Up First Angular Application ?)

Adding Bootstrap To Angular 11 Project With CLI

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

Then,

src/app/app.component.html

<div class="container mt-5">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div class="jumbotron">
                <h2 class="display-4 text-center" >Welcome To Php Coding Stuff</h2>
                <p class="lead text-center">how to install bootstrap in angular 11.</p>
                <hr class="my-4">
              </div>
        </div>
    </div>
</div>

Original source : https://www.phpcodingstuff.com/blog/adding-bootstrap-to-angular-11-project-with-cli.html