Today, i show you angular 16 install bootstrap 5 example. This article will give you simple angular 16 install bootstrap 5 example. you will angular 16 install bootstrap 5 example. In this article, we will implement a angular 16 install bootstrap 5 example.

So, let’s follow few steps to create example of angular 16 install bootstrap 5 example.

Step 1: Angular 16 Install

Follow This Command And Install Angular 16

ng new my-new-app

Step 2: Example 1

install bootstrap on your angular 16 and import css file to style.css file. this is only for css importing. so you can run command bellow:

npm install bootstrap --save

After that, we need to install the font awesome library using the below npm command

npm install font-awesome --save

import your bootstrap css on style.css file as like bellow:
src/style.css

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

Step 3: Example 2

We will also install bootstrap along with jquery and popper js. so that you can import bootstrap css and bootstrap js functions as well. So i think this will be the best solution for you i think.
let’s run following commands:

npm install bootstrap --save

npm install jquery --save

npm install popper.js --save

Now after running above command successfully. Let’s import it in the 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"
      ]

src/app/app.component.html

<div class="container">
  <h1>Angular 16 install Bootstrap 5 Example</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>

Run Angular App:

We have now completed all the steps, now you need to type the below command and press enter to run the Angular app:

ng serve

Now, go to your web browser, type the given URL and see the app output:

http://localhost:4200

I hope it will assist you…

The post Angular 16 install Bootstrap 5 Example appeared first on Codeplaners.