Angular 11 Add Bootstrap Tutorial

Hello Dev.

This educational will give you example of angular 11 add bootstrap. it's easy example of angular 11 installation bootstrap 4. right here you will learn set up bootstrap in angular 11. you may analyze set up bootstrap 4 in angular 11. well, let’s dive into the steps.

As we know Bootstrap is the world’s most popular framework for constructing responsive, and mobile-first sites. bootstrap provide numerous class for making responsive website to your cell. So if you want to use bootstrap with angular 11 than i'm able to help you quite simple way.

I have a two setup bootstrap and use it along with your angular 11 project. i can come up with both way instance bellow.

You can easily create your angular app using bellow command...

ng new my-new-app

Example 1:

In this solution, you need to just install bootstrap on your angular 11 and import css file to style.css file. this is only for css importing. so you can run command bellow...

npm install bootstrap --save

Ok, now you need to import your bootstrap css on style.css file as like bellow...
src/style.css

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

Now you can use bootstrap class in your angular 11 app. It will works.

Example 2:

In this solution, we will also install bootstrap with jquery and popper js. so that way you can also import bootstrap css and bootstrap js function. So i think this will be best solution for you.

let's run following commands...

npm install bootstrap --save

npm install jquery --save

npm install popper.js --save

Now after successfully run above command. let's import it in angular.json file.
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 bootstrap class as like bellow...
src/app/app.component.html

<div class="container">
  <h1>Install Bootstrap 4 in Angular 11 - meaningarticles.com</h1>
  
  <div class="card">
    <div class="card-header">
      Featured
    </div>
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

Now you can use bootstrap css and js both, Now you can check your angular 11 project.

i'm hoping it assist you to, thanks for visit my article if you like my article then proportion together with your friend and social platform.