We can significantly speed up progress on our Angular application when we enhance it with Bootstrap styles and ng-bootstrap widgets. Bootstrap classes will immediately transform the look and feel of our project and thanks to Angular-native components from ng-bootstrap we won’t be needing Bootstrap javascript.

Prerequisites

• You can find the example project that I use in this post in the efficient-mvp-example repository, in the frontend/src/main/angular module.
• At the time of writing this post, my Angular version is as follows:

• The starting point for the work presented in this post is contained in the commit 0d90b94868dcd1d5245bf1d80a20cda3d87de6db. You can see a custom home page for my example Angular application without Bootstrap and ng-bootstrap on the image below:

• And here you can see the html code responsible for the page:

Add ng-boostrap to your Angular project

As I said before, we won’t be needing any Bootstrap javascript in our project. Instead, we’re going to add ng-bootstrap components.

Installation

Remember to check out the installation command on the official ng-bootstrap Getting started page. You’ll find there not only commands for installing the library, but also the compatibility matrix for its dependencies:

At the moment of writing this post, I can install the version that is compatible with Bootstrap 5 with the following npm command:

We’ll see the library entry in our package.json file:

To make the ng-bootstrap modules accessible for our Angular app, we need to add them in the imports section in the app.module.ts file. On the other hand, we can also add the whole library with NgbModule. However, the resulting bundle will be larger. Therefore, remember that you can tailor imports to your needs. Below you can see an example with the whole library imported:

Thanks to that, we have a rich library of interactive components that work out of the box with Angular and will be familiar to anyone who used Bootstrap in the past:

Add Bootstrap styles to your Angular project

We’re going to install Bootstrap and use only its clasess in our project.

Installation

First, we’re going to install Bootstrap with the following npm command:

The package manager will add the appropriate entry in our package.json file:

Preparing for extensibility

We will most likely want to override some Bootstrap styles or provide additional variables, scss code, etc. Let’s prepare the scss directory structure so that we can easily change the look and feel of our app in the future.

You can check the resulting file structure in our scss/bootstrap directory in the image below for reference.:

First, we need to create the scss/bootstrap folder. Inside we can prepare empty files for the things we’re planning to work on. In my case I’m going to add _variables.scss because that’s usually the first thing I want to customize.

Consequently, to make extending the default classes easier, we’re going to add the _basics.sccs file. This will be the place for keeping all imports that are required for the extended code to work properly:

With all those imports in one file, extending default component styles will be more straightforward and organized. Now we can prepare the overrides directory for keeping our styles for Bootstrap components like _navbar.scss, _tables.scss, etc. For the moment, all we need in this directory is an empty _overrdies.scss file.

I’ll show you an example of extending Bootstrap later in this post.

Following the Bootstrap convention, we’re going to keep all imports in the bootstrap.scss file:

Usage

Add import for our bootstrap.scss file in the styles.scss file:

Finally, we can use Bootstrap classes in our Angular app! I’m going to add them in my home-page.component.html file:

As a result, the page will look like on the following screenshot:

The work done in this section is contained in the commit c3181d57606e878813606e69ab2df36fcf639a5d.

Extending Bootstrap styles

We’re going to customize the card from the home page example.

Override components

Let’s change the card border style from solid to dashed. We’re going to create the overrides/_card.scss file with the following content:

Thanks to importing our basics.scss file, we can comfortably use the Bootstrap variables ($card-border-width and $card-border-color) without our IDE complaining about it.

Now we have to actually use this customized class. Therefore, we’re going to import it in our _overrides.scss file:

That’s all we need to see the changes in the browser. Let’s customize colour palette on top of that.

Override variables

For this example, we’re going to replace some default colours with the ones I defined. Add the following lines to the _variables.scss file:

As a result, our page will look like this:

The work done in this section is contained in the commit 829b5d523ed8d00c0b3f778f691b10e82138eba5.

Learn more on using Bootstrap and ng-bootstrap with Angular

• Read more about theming, customizing, and extending Bootstrap
• Using the ng-bootstrap components is out of the scope of this post but the official documentation contains useful usage examples
• Enhance the presentation layer of your multi-layout Angular app

Photo by Leandro R. Barbosa from Pexels, Color Palette used to customize Bootstrap variables