Add Bootstrap 5 to Angular 17 with example & tutorial

Add Bootstrap 5 to Angular 17 with example & tutorial

Angular Bootstrap Throughout this tutorial, we’ll learn how to use bootstrap 5 with Angular 17 (and any previous versions such as Angular 9) to make your Angular app responsive.

We’ll learn how to install (and uninstall) bootstrap in Angular from npm, cdn or using the ng add schematic, and add bootstrap to the styles/scripts arrays of the angular.json file. Next, we’ll learn how to build user interfaces with various components such as navigation bars, grid, date and time pickers, tooltips, carousels, modals, tabs, dropdowns, and forms.

We’ll also see the advantages of Angular implementations for Bootstrap  —  ng-bootstrap vs ngx-bootstrap vs mdbootstrap. And see some popular Angular Bootstrap templates that you can use with Angular to quickly create your layouts.

Angular Bootstrap example

Introducing Angular 17 and Bootstrap 5

Both Angular 17 and Bootstrap 5 are very popular frameworks for either building client side apps in the case of Angular or styling and providing components for building professional UIs in the case of Bootstrap.

Angular positions itself as the platform of the contemporary web developer, providing developers with a unified method for developing applications and sharing code, as well as the capacity to build applications for any deployment target, including the web, mobile web, native mobile, and native desktop.

Angular delivers many benefits in terms of speed and performance by taking advantages of the maximum speed possible on the Web Platform nowadays, and further more, via modern techniques and APIs such as Web Workers and server-side rendering. Learning a competitive Angular Course also gives you an edge over scalability by using libraries like RxJS, Immutable.js or another push-model for building data models that meet huge data requirements.

Additionally, it has great developer tooling that simplifies the process of rapidly developing features using simple, and declarative templates. It has its own template language that can be further extended with custom components if using the extensive set of pre-built components still doesn’t meet your requirements. Furthermore, almost every integrated development environment (IDE) and code editor provides tailored feedback and support for Angular. Instead of getting mired down in the nitty-gritty details of making code work, you can focus on developing amazing apps.

If you're in doubts about Angular's capabilities, consider that it powers applications developed by Google and utilized by millions of people worldwide, owing to its scalable architecture and productivity features.

Bootstrap, on the other hand, is described as the world's most popular front-end open source toolkit for easily designing and customizing responsive mobile-first sites, including Sass variables and mixins, a responsive grid system, a large library of pre-built components, and powerful JavaScript plugins.

Bootstrap 5 was recently released with components written in plain JavaScript rather than jQuery, which was previously required for Bootstrap use. Even with the rise of modern frameworks and libraries such as Angular and React, jQuery has always been a requirement but also a source of conflict because these toolkits do not play well with jQuery or do things differently than jQuery, which manipulates the DOM directly rather than through virtual DOMs.

Both Angular and Bootstrap are open source projects that are available under the permissive MIT license.

Throughout these pathway’s angular tutorials, we’ll learn how to install Bootstrap 5 within an Angular 17 project and then we’ll see how step by step and by examples how to use Bootstrap components to build good looking UIs with Angular 17. We’ll also build a complete working Angular UI styled with Bootstrap as we progress through these tutorials.

Prerequisites

You should already have a basic grasp of the following to get the most out of this guide:

3+ Ways to Add Bootstrap 5 to Angular 17

In this section, we will see ways to integrate Angular and Bootstrap to style apps built.

We’ll see how to integrate Angular with Bootstrap, in various ways including using ng-bootstrap and ngx-bootstrap packages.

We’ll be using Angular CLI 17 for generating a brand new project.

These are the steps of our tutorial:

  • Step 1 — Installing Angular CLI v17
  • Step 2 — Installing Bootstrap 5 in Your Angular 17 Project
  • Step 3 (Method 1) — Adding Bootstrap 5 to Angular 17 Usingangular.json
  • Step 3 (Method 2) — Adding Bootstrap 5 to Angular 17 Usingindex.html
  • Step 3 (Method 3) — Adding Bootstrap 5 to Angular 17 Using
  • Alternative Step — Adding Bootstrap 5 Using ng-bootstrap and ngx-bootstrap

3+ Ways to Include Bootstrap 5 In Your Angular 17 Project

Bootstrap may be integrated into your Angular application in a variety of ways:

  • Add the Bootstrap CSS and JavaScript files in the <head> section of the index.html file of your Angular project with a <link> and <script> tags,
  • Import the Bootstrap CSS file in the global styles.css file of your Angular project with an @import keyword.
  • Add the Bootstrap CSS and JavaScript files in the styles and scripts arrays of the angular.json file of your project

Step 1 — Installing Angular CLI v17

Let’s get started by installing Angular CLI v17 if it is not yet installed on your machine.

Install the most recent version of the Angular CLI by running the following command in a new command-line interface:

$ npm install -g @angular/cli

Note: You may need to add sudo (for admin access) in macOS and Linux or use a command prompt with admin access in Windows to install the Angular 17 CLI globally on your machine.

After the installation, you’ll have at your disposal the ng utility. Let’s use it to generate a new Angular 17 project as follows:

$ ng new angular-bootstrap-examples

You will be prompted for a couple of questions:

? Would you like to add Angular routing? Yes? Which stylesheet format would you like to use? (Use arrow keys)> CSS  SCSS   [ https://sass-lang.com/documentation/syntax #scss                ]  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]  Less   [ http://lesscss.org                                             ]  Stylus [ http://stylus-lang.com                                         ]

Most importantly, choose CSS as the stylesheet format, since we will be working with the CSS version of Bootstrap in this article.

After pressing Enter in your keyboard, Angular CLI will create your initial project’s files and install the packages and log the process on the terminal which should have the following printed after project’s creation:

✔ Packages installed successfully.
    Successfully initialized git.

Next, navigate inside the root folder of your project:

$ cd angular-bootstrap-examples

You can then serve your Angular 17 application using the ng serve command as follows:

$ ng serve

Your app will be served from http://localhost:4200/.

Step 2 — Installing Bootstrap 5 in Your Angular 17 Project

In this step, we’ll proceed to add Bootstrap 5 to our Angular 17 application.

There are various ways that you can use to install Bootstrap in your project:

  • Installing Bootstrap from npm using the npm install command,
  • Downloading Bootstrap files and adding them to the src/assets folder of your Angular project,
  • Using Bootstrap from a CDN.

Let’s proceed with the first method. Go back to your command-line interface and install Bootstrap 5 via npm as follows:

$ npm install bootstrap

This will also add the bootstrap package to package.json. At the time of writing this tutorial, bootstrap v5 will be installed.

The Bootstrap 5 assets will be installed in the node_modules/bootstrap folder. You'll need to tell Angular where to look for them.

Step 3 (Method 1) — Adding Bootstrap 5 to Angular 17 Using angular.json

Open the angular.json file of your project and include:

  • node_modules/bootstrap/dist/css/bootstrap.css in the projects->architect->build->styles array,
  • node_modules/bootstrap/dist/js/bootstrap.js in the projects->architect->build->scripts array,
  • node_modules/bootstrap/dist/js/bootstrap.js in the projects->architect->build->scripts array,

As follows:

{  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",  "version": 1,   "newProjectRoot": "projects",  "projects": {    "angular-bootstrap-examples": {      "projectType": "application",      "schematics": {},      "root": "",      "sourceRoot": "src",      "prefix": "app",      "architect": {        "build": {          "builder": "@angular-devkit/build-angular:browser",          "options": {            "outputPath": "dist/angular-bootstrap-examples",            "index": "src/index.html",            "main": "src/main.ts",            "polyfills": "src/polyfills.ts",            "tsConfig": "tsconfig.app.json",            "aot": true,            "assets": [              "src/favicon.ico",              "src/assets"            ],            "styles": [              "./node_modules/bootstrap/dist/css/bootstrap.css",              "src/styles.css"                          ],            "scripts": [              "./node_modules/jquery/dist/jquery.js",              "./node_modules/bootstrap/dist/js/bootstrap.js"            ]          },

Note: You also need to add the jQuery JavaScript library file.

Step 3 (Method 2) — Adding Bootstrap 5 to Angular 17 Using index.html

You can also include Bootstrap files from node_modules/bootstrap using the index.html file.

Open the src/index.html file and add the following tags:

  • A <link> tag for adding the bootstrap.css file in the <head> section,
  • A <script> tag for adding the jquery.js file before the closing </body> tag,
  • A <script> tag for adding the bootstrap.js file before the </body> tag.

This is an example:

<!doctype html><html lang="en">
<head>  
<meta charset="utf-8">  
<title>Angular Bootstrap 5 Examples</title>  <base href="/">  
<meta name="viewport" content="width=device-width, initial-scale=1">  
<link rel="icon" type="image/x-icon" href="favicon.ico">  
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>  
<app-root></app-root>  
<script src="../node_modules/jquery/dist/jquery.js"></script>  <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>    
</body>
</html>

Step 3 (Method 3) — Adding Bootstrap 5 to Angular 17 Using styles.css

We can also use the styles.css file to add the CSS file of Bootstrap to our project.

Open the src/styles.css file of your Angular project and import the bootstrap.css file as follows:

@import "~bootstrap/dist/css/bootstrap.css"

This replaces the previous method(s), so you don’t need to add the file to the styles array of the angular.json file or to the index.html file.

Note: The JavaScript file(s) can be added using the scripts array or the <script> tag like the previous methods.

Alternative Step — Adding Bootstrap 5 Using ng-bootstrap and ngx-bootstrap

Bootstrap depends on the jQuery and popper.js libraries, and if you don’t include them in your project, any Bootstrap components that rely on JavaScript will not work.

Why not include those libs? For Angular, it’s better to avoid using libraries that make direct manipulation of the DOM (like jQuery) and let Angular handle that.

Now, what if you need the complete features of Bootstrap 5 without the JavaScript libraries?

A better way is to use component libraries created for the sake of making Bootstrap work seamlessly with Angular such as ng-bootstrap andngx-bootstrap

Should I add bootstrap.js or bootstrap.min.js to my project? No, the goal of ng-bootstrap is to completely replace JavaScript implementation for components. Nor should you include other dependencies like jQuery or popper.js. It is not necessary and might interfere with ng-bootstrap code Source

So first you’ll need to install the library from npm using the following command:

$ npm install @ng-bootstrap/ng-bootstrap

Once you finish the installation, you’ll need to import the main module:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

Next, you’ll need to add the module you imported in your app root module as follows:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({  declarations: [/*...*/],  imports: [/*...*/, NgbModule.forRoot()],  /*...*/})export class AppModule {}

Please note that ng-bootstrap requires the Bootstrap 5 CSS file to be present.

You can add it in the styles array of the angular.json file as follows:

"styles": [  "styles.css",  "../node_modules/bootstrap/dist/css/bootstrap.css"],

Now, you can use Bootstrap 5 in your Angular application.

You can find all the available components via this link.

You can also use the ngx-bootstrap library. Simply head back to your terminal, make sure you are inside your Angular project then run the following command to install ngx-bootstrap:

$ npm install ngx-bootstrap

You also need the Bootstrap 5 CSS files. Add the following line in the <head> of your Angular app which includes Bootstrap from a CDN:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.min.css" rel="stylesheet">

You can also install bootstrap from npm and use the previous way to include the CSS file (via the styles array in the angular-cli.json file):

"styles": [     
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
 "styles.css" ],

Next, open the src/app/app.module.ts file and update is as follows:

import { BsDropdownModule} from 'ngx-bootstrap/dropdown';import { AlertModule } from 'ngx-bootstrap';

/*...*/

@NgModule({   /*...*/   imports: [BsDropdownModule.forRoot(),AlertModule.forRoot(), /*...*/ ],    /*...*/ })

This an example of importing two components BsDropdownModule and AlertModule.

You need to import the module for each component you want to use in the same way.

ngx-bootstrap provides each Bootstrap component in each own module so you only import the components you need. In this way, your app will be smaller since it bundles only the components you are actually using.

You can find all the available components that you can use from the docs.

Adding Bootstrap 5 to Angular 17 Using Schematics

Thanks to the new ng add command added on Angular 7+, you have a new simpler and easier way to add Bootstrap without using the npm install command for installing the required dependencies or adding any configurations.

You can simply run the following command to add ng-bootstrap:

$ ng add @ng-bootstrap/schematics

That’s it. You now have support for Bootstrap components and styles without any extra configurations. You also don’t need jQuery since we are using ng-bootstrap.

Summary

In this section, we’ve seen different ways of including Bootstrap 5 in Angular 17 apps, such as:

  • Using original Bootstrap 5 assets from npm,
  • Using the ng-bootstrap library,
  • And finally using the ngx-bootstrap

The most important difference between ng-bootstrap vs. ngx-bootstrapis that ngx-bootstrap uses separate modules for components to reduce the final app size.

  • Date: