Angular 14 Bootstrap Full Step-by-Step Tutorial

Published in

techiediaries.com

3 min readOct 30, 2020

Throughout this tutorial, we’ll learn how to use bootstrap 4 with Angular 14 (and any previous versions such as Angular 10/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.

3+ Ways to Add Bootstrap 4 to Angular 14

In this section, we will see how to use Bootstrap to style apps built using Angular 14.

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 14 for generating a brand new project.

What is Bootstrap

Bootstrap is the most popular HTML and CSS framework for building responsive layouts with ease and without having a deep knowledge of CSS (Still custom CSS is required to customize your design and make it different from the other Bootstrap-styled websites unless you are using a BS theme developed specifically for your requirements.

Bootstrap 4 is the latest version of Bootstrap which brings many new and powerful features to the framework most importantly Flexbox which is now the default display system for the Bootstrap grid layout (one of the most important features of Bootstrap).

3+ Ways to Include Bootstrap 4 In Your Angular 14 Project

You can include Bootstrap in your Angular 14 project in multiple ways:

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

Read also:
5 Angular 14 hottest new features
Angular 14 was released in June 2022 and includes various new features that will assist to reduce code complexity, make it more type-safe, decrease…

Step 1 — Installing Angular CLI v14

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

Head over to a new command-line interface and run the following command to install the latest version of the Angular CLI:

$ npm install -g @angular/cli@next

Note: This will install the Angular 14 CLI globally on your system so depending on your npm configuration you may need to add sudo (for superuser access) in macOS and Linux or use a command prompt with admin access in Windows.

After the installation, you’ll have at your disposal the ng utility. Let’s use it to generate a new Angular 14 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 because we’ll use the CSS version of Bootstrap in our tutorial.

The command will generate the directory structure and necessary files for the project and will install the required dependencies.

Next, navigate inside the root folder of your project:

$ cd angular-bootstrap-examples

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

$ ng serve

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

Step 2 — Installing Bootstrap 4 in Your Angular 14 Project

In the next step, we’ll proceed to add Bootstrap 4 to our Angular 14 application.

You can read the full tutorial in Techiediaries.