Adding Bootstrap To Angular 11 Project With CLI


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

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. bootstrap provides several classes for making responsive websites for your mobile. So if you want to use bootstrap with angular 11, then I will help you with a very simple way to adding bootstrap to angular.

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

Concrete Footer Part 2
Concrete Footer Part 2
Adding Bootstrap To Angular 11 Project With CLI

You can easily create your angular app using the below command: (How To Install Angular And Set Up First Angular Application ?)

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

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

Conclusion

We have seen in this tutorial how to install bootstrap in Angular project. It became very easy. I have learned two ways how to add bootstrap to the Angular project.


I hope it can help you...

Leave a Reply

Your privacy will not be published. Required fields are marked *

We'll share your Website Only Trusted.!!

close