Angular + Bootstrap 4 Starter
How to use Bootstrap 4 with Angular 7
I’ve recently seen a lot of questions on Stack Overflow with developers trying to figure out how to use the latest Bootstrap 4 with Angular 7. Here’s what to do if you’re facing this challenge.
1. Add Bootstrap to package.json
npm install bootstrap --save
This will add the following lines to the “dependencies” section of the apps’ package.json
file…
"dependencies": {
..
"jquery": "^3.3.1",
"bootstrap": "^4.1.3",
"popper.js": "^1.14.3"
}
So the package.json
will look something like this…
2. Add Bootstrap to angular.json
You’ll also need to add Bootstrap to “apps” styles and scripts in the Angular JSON config file…
"apps": [{
..., "styles": [
"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"
],}]
It will look something like this…
3. Finally, add Bootstrap to the app
This last step will be more specific to your app. In this case I’m using an app module that the other components will inherit from, making Bootstrap available to all the apps’ components…
It’s simply imported using:
import bootstrap from "bootstrap";
It looks like this in my app module TypeScript…
That’s It!
Of course you probably want to see this in action. Here’s a working demo for you to fork or play with:
I’ve also added a Bootstrap Modal to the demo so that you can see how to work with the Bootstrap 4 components.
Thanks for reading the whole story. Keep on learning more Bootstrap 4, ❤ and how-to Bootstrap.
_Carol