How to add Bootstrap to your Angular project with ng-bootstrap

featured image

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

  • 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:
an example Angular app without Bootstrap and ng-bootstrap
  • 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:

ng-bootstrap compatibility matrix with Bootstrap and Angular

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:

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:

ng-bootsrap components that will work in every Angular project with Bootstrap

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

bootstrap directory tree

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 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:

Angular app with Bootstrap styles

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:

Bootstrap card with custom styles

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

Learn more on using Bootstrap and ng-bootstrap with Angular

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

Leave a Reply

Your email address will not be published. Required fields are marked *