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 bootstrap@3.3.7
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