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.

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

Node Js Angular

Robert look

Author, Web Developer (Front-end & Back-end)

My Name is Robert look from New york, America. I'm a Web Application Developer with 6 years of experience. Currently, I'm working on front-end & back-end web development using popular web technology Languages. That's why I love to share my coding knowledge in a smart way.