How to Add Bootstrap to Your Angular Projects

Angular is a powerful framework that’s ranked among the top five JavaScript-based frameworks.

However, while Angular provides the base of a website or single-page application, it doesn’t offer a user interface (UI). You’ll have to write the UI of your application on your own. Fortunately, there are plenty of CSS frameworks you could install to make that job more manageable.

Bootstrap is one such framework that has evolved since launching in 2010. Previously relying on jQuery, Bootstrap 5 now reduces the number of dependencies and runs mostly on pure JavaScript. Bootstrap offers beneficial customization features, with many dedicated developers producing themes, widgets, and plugins that you can use with Bootstrap’s CSS and features.

You can easily combine Bootstrap with Angular to build your UIs and additional features. This allows you to create animations and UI features and prototype your website layout. In this hands-on tutorial, we’ll show you how to add Bootstrap CSS to your Angular project.

How to Add Bootstrap to Angular

In this tutorial, we’ll be building an Angular CLI application under Node.js. Then, we’ll install Bootstrap via NPM and set it up. Once configured, we’ll build a small application with a button and a modal.

1. Prerequisites

To follow this tutorial, you will need:

• Node.js installed.
• npm installed.
• An IDE. This demonstration uses Visual Studio Code.
• Angular CLI installed on your machine. To install the Angular CLI, you need to open a console window. It’s recommended to install the CLI globally so that you can start new projects anywhere. Then, run npm install -g @angular/cli@latest.

For a preview of the final project, take a look at the complete project code.

2. Create a Project

The next step is to build the project. Move to the directory that you wish to create it in, and type the following command: ng new hello-world

You can replace hello-world with your own project ID.

Running this command will load the CLI and prompt you to answer the following questions:

1. “Add Angular Routing?”: Here, you’ll choose if you’re building an app with multiple pages.
2. “Which stylesheet format would you like to use?”: Here, select your preferred CSS platform.

Then, navigate to the project folder. Switch into it using the cd command to access your project.

When the project is ready and you’re in the correct folder, start it by running the following: ng serve --open

3. Get Bootstrap Ready and Installed

If you’re running Angular already, you’ll need to open a new console window to manage the installation. Then, enter the following: npm install --save bootstrap

Wait for the installation to finish, which should only take a few minutes.

Next, you need to import Bootstrap CSS.

In your application’s global scss file — which will most likely be styles.scss — import the Bootstrap file using this command: @import "~bootstrap/dist/css/bootstrap.css";

This will include the Bootstrap 5 styling, allowing you to use all the CSS features that Bootstrap provides.

4. Prepare the Features

Next, you need to install Bootstrap’s features. Navigate to the angular.json file and open it. It should be in the top-level directory of your project folder.

By default, Angular won’t recognize that Bootstrap’s JS is installed. You need to locate the scripts section of the configuration file to get it to do so. Insert this line, pointing it toward Bootstrap’s files:

./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js

If you don’t want to import the Bootstrap.css file, you can also include it here under styles, below src/styles.scss:

Angular won’t recognize it right away if it’s running. So, close the page and stop ng serve --open by typing Ctrl+C. This will cause the node to terminate the Angular application.

Then, type ng serve --open to get it started again.

While it’s running, you should have access to Bootstrap’s abilities. You can use its features to easily create elements like modals, accordions, cards, and floating labels. Once you have a prototyped layout, you can style and recolor these elements to fit the theme you want. This saves you time, allowing you to focus on creating custom elements that your site may need.

5. Build a Modal

Now that you’ve installed Bootstrap, let’s see how it works with a small modal. Angular generates an example app with a single main component under the app folder.

Click on the app.component.html file. You’ll see a default template. Erase the code that’s there and add the following code to create a button and modal:

Open the app.component.html file in the same folder, and add the following additional imports after Component:

ElementRef allows Angular 2 to reference elements in the HTML, and ViewChild defines them. However, this works best after you initialize the view, so you need to reference AfterViewInit. To call Bootstrap’s features, you also need to add its import, which is the final line of the code snippet above.

Note that you may need to add the Bootstrap types so that TypeScript can understand the class. If so, in your console window in the same folder, type: npm i –save-dev @types/bootstrap

Now you’re ready to create a functional modal. In app.component.ts, add these methods and variables to the class:

Here’s a breakdown of what you just added:

• First, you added a @ViewChild reference and pointed it to the helloModal target. This is the elementRef that you need. Note that adding ? allows TypeScript to assume that it’s undefined.
• Then, you created a modal? variable with the type bootstrap.Modal. It references the Bootstrap modal class.
• Next, you created two methods, ngAfterViewInit() and trigger(), which are implemented AfterViewInit.
• Inside AfterViewInit, you called the bootstrap modal and referenced ElementRef and its native element. You can configure options to pass to the modal here or leave it blank with a {}.
• Finally, in your trigger() method, you called this.modal?.toggle() to change the visible state.

Now, when you click the button on the page, the modal should pop up:

In the template code, the Angular method (click) references the trigger() method, which calls Bootstrap. You can configure other features this way as well, by referencing the element and linking them in the template.

Using Bootstrap with Angular

In this tutorial, you created a default Angular application using TypeScript and SASS and then applied Bootstrap 5 and its CSS to Angular. You also learned how to display a modal using just Bootstrap and Angular’s native code.

You can use Bootstrap to enhance any application you’re developing, allowing you to rapidly prototype and build responsive applications far quicker than you would otherwise. It’s also mobile-first, so your website should work even smoother with smaller screens. You can use all of its features to build creative applications quickly and easily.