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

Replace 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.

Finally,

cd ng12b5-example

2. Install bootstrap

Unsurprisingly,

npm install bootstrap

3. Include bootstrap styles

Add the following to src/styles.sass:

@import '~bootstrap/scss/bootstrap'

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 styles.sass:

// 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 ng-bootstrap. ngx-bootstrap doesn't support bootstrap 5 (yet), but ng-bootstrap does (in beta). So let's use that one:

ng add @ng-bootstrap/ng-bootstrap@11.0.0-beta.1

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 NgbModule. Great!

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.