Bootstrap with Angular
Bootstrap is a popular CSS framework that makes it easy to create responsive and attractive web pages. You can easily integrate Bootstrap into your Angular project.
Method 1: Using npm (Recommended)
Install Bootstrap and its dependencies:
npm install bootstrap jquery popper.js
Then add Bootstrap to your
angular.json inside the styles and scripts arrays:"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Method 2: Using CDN
Add the following lines inside the
<head> of index.html:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Now you can use Bootstrap classes in your templates. For example:
<div class="container">
<div class="row">
<div class="col-md-6">Left column</div>
<div class="col-md-6">Right column</div>
</div>
</div>
Two Minute Drill
- Bootstrap adds responsive styling and components.
- Install via npm and update angular.json, or use CDN.
- After setup, use Bootstrap classes in your HTML templates.
- This speeds up UI development significantly.
Need more clarification?
Drop us an email at career@quipoinfotech.com