3+ Ways to Add Bootstrap 4 to Angular 12

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

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

What is Bootstrap

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 12 Project

  • Including the Bootstrap CSS and JavaScript files in the <head> section of the index.html file of your Angular 12 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

Step 1 — Installing Angular CLI v12

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 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 12 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)
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 12 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 12 Project

You can read the full tutorial in Techiediaries.

Developer and technical author. Read more articles at Techiediaries