How to Add Bootstrap to an Angular 10

Author:
In this short article, we will learn how to add Bootstrap 3 or Bootstrap 4 to an existing Angular 10 project.
I assume you have already created an Angular 10 Project and now we will integrate bootstrap into it.
Refer below tutorial for complete example:
>> Angular 10 Example Tutorial (added bootstrap)

Installing Bootstrap using NPM

Let's use npm command to download bootstrap and note that it will be installed into the node_modules folder. 
For Bootstrap 3:
npm install [email protected]
For Bootstrap 4:
npm install bootstrap

Alternative: Local Bootstrap CSS

As an alternative, you can also download the Bootstrap CSS and add it locally to your project. I downloaded bootstrap libraries from the official website and added to folder styles (same level as styles.css):

Import the Bootstrap CSS

We have two options to import the CSS from Bootstrap that was installed from NPM:
1: Configure angular.json:
...
"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...
2: Import directly in src/style.css or src/style.scss:
@import '~bootstrap/dist/css/bootstrap.min.css';

Alternative: Using Local Bootstrap CSS

If you added the Bootstrap CSS file locally, just import it in angular.json
"styles": [
  "styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
  "styles.scss"
],
or src/style.css:
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
That's all. we have installed bootstrap using npm or local and imported in angular.json or style.scss.

Adding Bootstrap 4 CDN Link

You can also add bootstrap 4 CDN link to Angular app to use bootstrap. Add the following line in the <head> of your Angular app which includes Bootstrap from a CDN:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
You can also add bootstrap 4 CDN link in src/style.css file like this:
@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';
Refer below tutorial for complete example:
>> Angular 10 Example Tutorial (added bootstrap)



Comments

Post a Comment

Leave Comment