Hi dev,
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…