DEV Community

Cover image for Adding Bootstrap To Angular 11 Project With CLI
Robert Look
Robert Look

Posted on

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 ?)

demo-bootstrap.png

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"
      ]
.....
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)