Start an app with Angular 12 and Bootstrap 5
Before you start, there's also a guide for bootstrap 4 here.
Angular and Bootstrap are a great combination for building good-looking, interactive web-apps. This guide describes how I go about starting a new project:
1. Create an angular project
This step is simple, just run:
ng new ng12b5-example
ng12b5-example with the name of your project.
The Angular CLI will ask which stylesheet format you would like to use - select SASS, that way we can overwrite bootstrap variables (see step 4). You could also use SCSS if you're into that.
2. Install bootstrap
npm install bootstrap
3. Include bootstrap styles
Add the following to
This will add the bootstrap styles to our app.
4. (Optional) customize bootstrap variables
We can override bootstrap variables to make our app more unique.
For example, default bootstrap uses rounded corners. If you're more into sharp edges, simply set the corresponding variable in
// Variable overrides must come before the import $border-radius: 0 @import '~bootstrap/scss/bootstrap'
5. (Optional) install a library for interactive elements
If you only need the bootstrap styles, you can stop reading here. But if you want interactive elements (modals, alerts, etc.), you'll need one of two libraries:
ngx-bootstrap by Valor software, or the community project
ngx-bootstrap doesn't support bootstrap 5 (yet), but
ng-bootstrap does (in beta). So let's use that one:
ng add @firstname.lastname@example.org
Note that this command might change your
styles.sass by importing bootstrap again, which is well-meaning but redundant in this case. If that happens, just remove the second import.
You'll also notice that
app.module.ts has been changed and is now importing the
Consult the ng-bootstrap docs to find out how to use your new library.
That's it! You can find the example code on my github.
Remember that there's a separate guide for bootstrap 4 here.
You might also be interested in how to add a custom theme switcher to your app.