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
- 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
htmlcode responsible for the page:
Add ng-boostrap to your Angular project
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
We’ll see the library entry in our
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.
First, we’re going to install Bootstrap with the following
The package manager will add the appropriate entry in our
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
_tables.scss, etc. For the moment, all we need in this directory is an empty
|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
Add import for our
bootstrap.scss file in the
Finally, we can use Bootstrap classes in our Angular app! I’m going to add them in my
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.
Let’s change the card border style from
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-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
That’s all we need to see the changes in the browser. Let’s customize colour palette on top of that.
For this example, we’re going to replace some default colours with the ones I defined. Add the following lines to the
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