Today in this post we read How to Add Bootstrap to an Angular CLI project. by simply adding bootstrap to the simple angular path. step by step how to install bootstrap in angular 11.

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

As we know Bootstrap is the world's most popular website builder for responsive websites, and mobile phones. Bootstrap offers a few classes to create responsive websites for your mobile. So if you want to use bootstrap with angular 11, then I will help you with the easiest way to add bootstrap to angular.

I have two bootstrap to install and use with your angular projects 11. I will give you both options for example see below How to Add Bootstrap to an Angular CLI project.


You can easily create your angular app using the below command: 

ng new my-new-app

Example 1:

In this example, you need to just install bootstrap on your angular 11 and import the CSS file to the style.css file. this is only for CSS importing. so you can run the command below:

npm install bootstrap --save

Ok, now you need to import your bootstrap CSS on the style.css file in your project as like bellow:

src/style.css

@import "~bootstrap/dist/css/bootstrap.css";

Now you can use the bootstrap class in your angular 11 application. It will work to install bootstrap 4 in angular 11.


Example 2:

In this example, we will also install bootstrap with jquery and popper js in your project. so that way you can also import bootstrap CSS and bootstrap js function. So I think this will be the best solution for you I think.

let's run the following commands:

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save


Now after successfully run the above command. let's import it in angular.json file. We learn how to install bootstrap in angular 11.

angular.json

....
      "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"
      ]
.....

Now you can easily use the bootstrap class as like bellow:

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 rathorji</h2>
                <p class="lead text-center">how to install bootstrap in angular 11.</p>
                <hr class="my-4">
              </div>
        </div>
    </div>
</div>

Now you can use bootstrap CSS and js both in your application.


I hope it can help you...