How to use Bootstrap with Angular? Top 5 Free Angular Bootstrap Resources
Tags: productivity, angular, webdev, html
Published: 2020-09-23 10:23:52

In this article, we are going to see different ways to install bootstrap 4 into our Angular 10 application. If you don’t have angular 10 installed on your local machine, you can see this [tutorial](https://blog.wrappixel.com/angular-upgrade/?ref=232) on how to install it.

**Prerequisites**

- Familiarity with HTML, CSS, and JavaScript (ES6+).
- Vs code or any code editor installed on your development machine.
- Basic knowledge of Angular


## Setting up our Angular Bootstrap application

We will start by setting up a new Angular application using the Angular’s CLI. To do this, create a directory and open up your terminal in that directory:

    ng new bootstrap-angular

Running this command will prompt some question for the installation. type `N` to remove angular routing and select `css` as the stylesheet format for our application.

After installation, we into the project directory by typing  `cd bootstrap-angular` on your terminal.

Bootstrap consist of the bootstrap’s core script and jQuery. We will use npm to install and setup this package. To do this open up your terminal and run this command. Ensure that you are on your projects working directory):


    npm install --save bootstrap jquery

After installation we have to add this to our angular package.

The first method is by adding it in our `angular.json` file. Open up the `angular.json` file and import it in the styles and script array:

      "styles": [
                  "src/styles.css",
                  "./node_modules/bootstrap/dist/css/bootstrap.css"
                ],
                "scripts": [
                  "./node_modules/jquery/dist/jquery.js",
                  "./node_modules/bootstrap/dist/js/bootstrap.js"
                ]

This will add the bootstrap script and styles into our application. With this done we can now try bootstrap components by modifying our codes in our `src/app/app.components.html` file to this:


    <section>
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <!-- testing buttons -->
            <button class="btn btn-primary">Hello World</button>
            <div
              class="alert alert-warning alert-dismissible fade show"
              role="alert"
            >
              <strong>Hi..</strong> I'm Sunil..I write Angular
              <button
                type="button"
                class="close"
                data-dismiss="alert"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>

We can open our application by running `ng serve` on our terminal. This will open up our application on port 4200:

![Bootstrap 4 Angular](https://www.wrappixel.com/demos/images/bootstrap4-angular.jpg)


## Using Bootstrap CDN method

Another way of adding bootstrap in our application is by adding the bootstrap CDN in our root `index.html` file. To confirm that this is working, you can remove the code you added in the `angular.json` file. Modify the `src/index.html` file to this:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>BootstrapAngular</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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    </head>
    <body>
      <app-root></app-root>
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
      </script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
      </script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
      </script>
    </body>
    </html>
    

If this doesn’t work immediately, you will have to restart your application to see the changes.

## Using ng-bootstrap method

Another good method is by using the `ng-bootstrap` widget. This has all the bootstrap components that we can use in our application.

To install it open up your terminal and type the following:

    ng add @ng-bootstrap/ng-bootstrap

Using `ng add` configures the package for which makes work easier. Now we can test our component by modifing our `src/app/app.component.html` file to this:

    <section>
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <ul ngbNav #nav="ngbNav" class="nav-tabs">
              <li ngbNavItem>
                <a ngbNavLink>First</a>
                <ng-template ngbNavContent>First content</ng-template>
              </li>
              <li ngbNavItem>
                <a ngbNavLink>Second</a>
                <ng-template ngbNavContent>Second content</ng-template>
              </li>
            </ul>
            <div [ngbNavOutlet]="nav"></div>
          </div>
        </div>
      </div>
    </section>



We can add some bootstrap components into our application by using their specific component.


## Alert Component
    <section>
      <p>
        <ngb-alert [dismissible]="false">
          <strong>Warning!</strong> Sunil is Here for more Angular Templates and Tips
        </ngb-alert>
      </p>
    </section>
    

Here the alert component can be accessed using `ngb-alert`


![Angular Bootstrap](https://www.wrappixel.com/demos/images/angular-bootstrap-alert-component.jpg)

## Carousel Component
    <section>
      <ngb-carousel>
        <ng-template ngbSlide>
          <div class="picsum-img-wrapper">
            <img
              src="https://images.pexels.com/photos/5103656/pexels-photo-5103656.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
              alt="Random first slide" height="600" width="100%" style="object-fit: cover;">
          </div>
          <div class="carousel-caption">
            <h3>First slide label</h3>
            <p>Wrappixel Makes the best templates</p>
          </div>
        </ng-template>
        <ng-template ngbSlide>
          <div class="picsum-img-wrapper">
            <img
              src="https://images.pexels.com/photos/3048196/pexels-photo-3048196.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
              alt="Random second slide" height="600" width="100%" style="object-fit: cover;">
          </div>
          <div class="carousel-caption">
            <h3>Second slide label</h3>
            <p>I am Sunil, I can give you cool Frontend Templates and Tips</p>
          </div>
        </ng-template>
        <ng-template ngbSlide>
          <div class="picsum-img-wrapper">
            <img
              src="https://images.pexels.com/photos/6010/sea-beach-holiday-vacation.jpg?auto=compress&cs=tinysrgb&dpr=2&w=500"
              alt="Random third slide" height="600" width="100%" style="object-fit: cover;">
          </div>
          <div class="carousel-caption">
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </div>
        </ng-template>
      </ngb-carousel>
    </section>


The bootstrap carousel component can be accessed using `ngb-carousel`. Each of the carousel has an `ngbSlide` attribute.


## Tables

We can also work with table as this is one the core component in bootstrap. To use it, we will define some dummy data in our `src/app/app.component.ts` file:

    import { Component } from "@angular/core";
    interface Country {
      name: string;
      flag: string;
      area: number;
      population: number;
    }
    const COUNTRIES: Country[] = [
      {
        name: "Russia",
        flag: "f/f3/Flag_of_Russia.svg",
        area: 17075200,
        population: 146989754,
      },
      {
        name: "Canada",
        flag: "c/cf/Flag_of_Canada.svg",
        area: 9976140,
        population: 36624199,
      },
      {
        name: "United States",
        flag: "a/a4/Flag_of_the_United_States.svg",
        area: 9629091,
        population: 324459463,
      },
      {
        name: "China",
        flag: "f/fa/Flag_of_the_People%27s_Republic_of_China.svg",
        area: 9596960,
        population: 1409517397,
      },
    ];
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"],
    })
    export class AppComponent {
      title = "bootstrap-angular";
      countries = COUNTRIES;
    }
    

And then define our template in the `src/app/app.component.htm` file:
```
    <section>
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <p>Table is just a mapping of objects to table rows with <code>ngFor</code></p>
            <table class="table table-striped">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Country</th>
                  <th scope="col">Area</th>
                  <th scope="col">Population</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let country of countries; index as i">
                  <th scope="row">{{ i + 1 }}</th>
                  <td>
                    <img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag" class="mr-2"
                      style="width: 20px">
                    {{ country.name }}
                  </td>
                  <td>{{ country.area | number }}</td>
                  <td>{{ country.population | number }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
```

![Table Component](https://www.wrappixel.com/demos/images/table-component.jpg)



We can put all our components together to build awesome websites.

![Full Preview](https://www.wrappixel.com/demos/images/full-preivew-ang-boot-wrappixel.jpg)


You can go on and explore all your Bootstrap components in your application after setting this up.

---

## Top 5 Free Angular Bootstrap Templates for Every Developer

### [Monster Free Angular Bootstrap Dashboard](https://www.wrappixel.com/templates/monster-angular-lite/?ref=232)
[![Monster Free Angular Dashboard](https://www.wrappixel.com/wp-content/uploads/edd/2020/04/monster-angular-lite-admin-y.jpg)](https://www.wrappixel.com/templates/monster-angular-lite/?ref=232)
To get your hands on the cutting edge angular admin template free, WrapPixel offers Monster Angular Lite to download at no extra cost. One of the simplified and clean designed templates has a lot of fascinating features for the best user experience.

Being a prominent template offers fully responsive pages with a bunch of features like pages template, UI components, dashboard, table examples, 100+ font icons, chart options, regular updates and a lot more. An admin panel angular template free download that offers customization options, amazing colors is based on Angular framework and SaSS Base CSS. Looking to get the advanced features for your commercial projects? WrapPixel exclusively offers a premium version of this template to get the complete experience of exciting features powered by the Angular latest version.


* [Live Preview](https://www.wrappixel.com/demos/angular-admin-templates/monster-angular-lite/index.html/?ref=232)
* [Download](https://www.wrappixel.com/templates/monster-angular-lite/?ref=232)
* [Premium Version](https://www.wrappixel.com/templates/monster-angular-dashboard/?ref=232)

---

### [AdminPro Angular Admin Lite](https://www.wrappixel.com/templates/adminpro-angular-lite/?ref=232)
[![AdminPro Angular Admin Lite](https://www.wrappixel.com/wp-content/uploads/edd/2020/04/adminpro-angular-lite-y.jpg)](https://www.wrappixel.com/templates/adminpro-angular-lite/?ref=232)
Just imagine, what if you get 7+ page templates, 10+ UI components, 10+ integrated plugins, ready-to-use widgets, creative 100+ font icons, and regular updates all for free with admin dashboard angular? AdminPro Angular Lite does exactly that by providing essential components at no extra cost. 

The essential components, elements, and widgets provided by [free angular dashboard templates](https://www.wrappixel.com/templates/category/angular-templates/?ref=232) are resourceful, lucrative and helps you to create stunning as well as high-performing admin dashboards for all your projects. To get all the features right away you can purchase the pro version of this template for commercial projects that will not only improve the customer experience but also simplify your development process. 

* [Live Preview](https://www.wrappixel.com/demos/angular-admin-templates/admin-pro-angular-lite/index.html/?ref=232)
* [Download](https://www.wrappixel.com/templates/adminpro-angular-lite/?ref=232)
* [Premium Version](https://www.wrappixel.com/templates/adminpro-angular-dashboard/?ref=232)

---

### [Ranjith Angular Bootstrap](https://github.com/ranjithprabhuk/Angular-Bootstrap-Dashboard)
![Ranjith](https://www.wrappixel.com/demos/images/ranjith-wp.jpg)
Angular Bootstrap Dashboard is a web dashboard application based on Bootstrap and AngularJS. All components included in this dashboard template has been developed to bring all the potential of HTML5 and Bootstrap plus a set of new features (JS and CSS) ideal for your next dashboard admin theme or admin web app project.

* [Live Preview](http://dashboard.ranjithprabhu.in/#/login)
* [Download](https://github.com/ranjithprabhuk/Angular-Bootstrap-Dashboard)

---

### [Bknds Dashboard](https://github.com/bknds/ng-pi-admin)
![Bknds](https://www.wrappixel.com/demos/images/bknds.jpg)
Bknds is easy to use admin dashboard based on angular bootstrap. You can download from github and use it in your projects. It comes with light and dark color mode and few ready to use page templates. It might be good fit for your admin panel.

* [Live Preview](https://treesflower.com/dist/pages/index)
* [Download](https://github.com/bknds/ng-pi-admin)

---

### Sponsored:


[![Bootstrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8973tqmybfagaacsfnff.jpg)](https://adminmart.com/templates/bootstrap/?ref=6)

---

### [Xtreme Free Angular Bootstrap 4 Admin](https://www.wrappixel.com/templates/xtreme-angular-lite/?ref=232)
[![Xtreme Angular Admin Free](https://www.wrappixel.com/wp-content/uploads/edd/2020/04/xtreme-angular-lite-y.jpg)](https://www.wrappixel.com/templates/xtreme-angular-lite/?ref=232)
Is your priority vibrant colors and budget both at the same time? Xtreme Angular Admin Lite is a free angular clean design admin template that offers fully responsive pages along with instant customization options to give a personal touch to your admin dashboard. This particular template offers features like page templates, chart options, mini sidebar version, UI components, stunning font icons, flexibility with design and much more for your personal as well as commercial projects.

It is based on the Angular framework and SaSS Base CSS with a modular approach making it the most acclaimed dashboard modular design admin template. To get the complete edge over the advanced features WrapPixel offers a pro version with outperforming features just for you.

* [Live Preview](https://www.wrappixel.com/demos/free-admin-templates/xtreme-angular-lite/?ref=232)
* [Download](https://www.wrappixel.com/templates/xtreme-angular-lite/?ref=232)
* [Premium Version](https://www.wrappixel.com/templates/xtreme-angular-admin/?ref=232)

---