In this example, i will show you how to install bootstrap in angular 10. This article will give you simple example of how to add bootstrap in angular 10. if you have question about angular 10 install bootstrap 4 then i will give simple example with solution. let’s discuss about install bootstrap in angular 10. You just need to some step to done install bootstrap 4 in angular 10.
As we know Bootstrap is the world’s most popular framework for building responsive, and mobile-first sites. bootstrap provide several class for making responsive website for your mobile. So if you want to use bootstrap with angular 10 than i will help you very simple way.
I have a two install bootstrap and use it with your angular 10 project. i will give you both way example 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 10 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 10 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 i think.
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 10 - HDTuto.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 10 project.
I hope it can help you...
Do you like below Tutorials ?
- PHP Laravel 5.5 - import export data into excel and csv using maatwebsite
- Laravel 7.x and 6.x create custom facade example from scratch
- Node JS - Get Real time online users counter using socket io example
- PHP Laravel 7.x and 6.x - Bootstrap Admin Theme Integration example from scratch
- MySQL Query - How to select records of today to next Sunday ?
- Laravel 7.x and 6.x - username custom validation example
- Laravel 5.5 - Import Extract zip file using chumper/zipper package
- PHP Laravel Set Custom Validation Error Messages Example