How to Use Bootstrap 5 with Angular

How to Use Bootstrap 5 with Angular

A number of frameworks that include Bootstrap and Angular are widely used for front-end development. These frameworks offer a comfortable developing environment which makes it easier to build complex and powerful web applications. Angular is generally used when developing single-page applications while Bootstrap can be used for a wide variety of applications.

Bonus Read: Check out our entire range of Bootstrap dashboard templates here.

Integrating Bootstrap with Angular offers unlimited number of possibilities when working on  web app development projects. But, we cannot integrate native Bootstrap with angular, due to Bootstrap’s jQuery dependency. So, you will need to use a component library like ngx-Bootstrap or ng-Bootstrap to avoid the jQuery dependency of Bootstrap. In this example, we will be solely working with the ng-Bootstrap library. 

Getting Started with ng-bootstrap5

The ng-bootstrap repository allows you to use Bootstrap with Angular without any dependency on jQuery or Bootstrap’s JavaScript. It contains native Angular directives based on Bootstrap’s HTML markup and CSS. So, you can have Bootstrap’s styles with the power of Angular with ng-Bootstrap.

You must install Bootstrap 4 and Angular in your project before proceeding to install ng-bootstrap. 

Bonus Read: Check out our entire range of angular js dashboard and curated angular dashboard here.

Getting started With Angular CLI 

Angular CLI, which is a command line interface tool can be used to initialize, scaffold, maintain, and develop web applications. We will be using Angular CLI to create a project in this example.

Installing Angular CLI 

Use the following command to install Angular CLI in your system.

$ npm install -g @angular/cli

Creating a Project With Angular CLI

Here’s the command you will need to run to initiate a new project. 

$ ng new mynewproject

This will create a new project folder for you to work with. Now navigate to the project folder and start up the web server.

$ cd mynewproject

Now, enter the following command to open the web browser. 

$ ng serve

Now, run the following code to install Bootstrap on your system by using npm. 

$ npm install bootstrap

Import bootstrap.css in style.css after the installation. You can do that by adding the following command to style.css.

@import '~bootstrap/dist/css/bootstrap.css';

Once you have installed the dependencies, you can install ng-bootstrap as an npm package by using the command

ng add @ng-bootstrap/ng-bootstrap@bootstrap5

The next step is to import ng-bootstrap’s main module. You will need to add the following statement to app.module.ts file to do that.

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

Start Coding With ng-bootstrap

ng-bootstrap comes with a huge selection of components. Some of these components are available in Bootstrap, while others are not.  In the ng-bootstrap documentation, you can find the code example for all the components that you can use directly to your project so that you don’t have to build anything from the ground up. 

Dropdown

Toggleable contextual overlays, Dropdowns makes it easier to display lists of links and more with ease.

Here’s the code you will need to run to add a dropdown

<div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>

      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">

        <button ngbDropdownItem>Action - 1</button>

        <button ngbDropdownItem>Another Action</button>

        <button ngbDropdownItem>Something else is here</button>

      </div>

    </div>

Accordion

Bootstrap Accordion component makes it simpler to organize content within collapsible items. 

Here’s the code you will need to run to add an accordion

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">

        <ngb-panel title="Simple">

          <ng-template ngbPanelContent>

            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia

            aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,

            sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,

            craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings

            occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus

            labore sustainable VHS.

          </ng-template>

        </ngb-panel>

        <ngb-panel>

          <ng-template ngbPanelTitle>

            <span>&#9733; <b>Fancy</b> title &#9733;</span>

          </ng-template>

          <ng-template ngbPanelContent>

            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia

            aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,

            sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,

            craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings

            occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus

            labore sustainable VHS.

          </ng-template>

        </ngb-panel>

        <ngb-panel title="Disabled" [disabled]="true">

          <ng-template ngbPanelContent>

            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia

            aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,

            sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,

            craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings

            occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus

            labore sustainable VHS.

          </ng-template>

        </ngb-panel>

      </ngb-accordion>

Tab

Tab based navigations offers a simple way to organize content into separate panes, where only one of them is visible at a time.

Here’s the code you will need to run to add a tab

<ul ngbNav #nav="ngbNav" class="nav-tabs">

        <li ngbNavItem>

          <a ngbNavLink>First</a>

          <ng-template ngbNavContent>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</ng-template>

        </li>

        <li ngbNavItem>

          <a ngbNavLink>Second</a>

          <ng-template ngbNavContent>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</ng-template>

        </li>

      </ul>

      <div [ngbNavOutlet]="nav"></div>

Sample Page

Here is an example of a sample page we have created using multiple Bootstrap components.

The code to create such a sample page is given below.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <ul class="navbar-nav me-auto mb-2 mb-lg-0">

        <li class="nav-item">

          <a class="nav-link active" aria-current="page" href="#">Home</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">Link</a>

        </li>

        <li ngbDropdown class="nav-item">

          <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>

          <ul ngbDropdownMenu aria-labelledby="dropdownBasic1" class="dropdown-menu">

            <li><a class="dropdown-item" href="#">Action</a></li>

            <li><a class="dropdown-item" href="#">Another action</a></li>

            <li><hr class="dropdown-divider"></li>

            <li><a class="dropdown-item" href="#">Something else here</a></li>

          </ul>

        </li>

        <li class="nav-item">

          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

        </li>

      </ul>

      <form class="d-flex">

        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">

        <button class="btn btn-outline-success" type="submit">Search</button>

      </form>

    </div>

  </div>

</nav>

<div class="container">

  <div class="row mt-5">

    <div class="col-sm-4">

      <div class="card">

        <img src="https://via.placeholder.com/250X100" class="card-img-top" alt="...">

        <div class="card-body">

          <h5 class="card-title">Card title</h5>

          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

          <a href="#" class="btn btn-primary">Go somewhere</a>

        </div>

      </div>

    </div>

    <div class="col-sm-4">

      <div class="card">

        <img src="https://via.placeholder.com/250X100" class="card-img-top" alt="...">

        <div class="card-body">

          <h5 class="card-title">Card title</h5>

          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

          <a href="#" class="btn btn-primary">Go somewhere</a>

        </div>

      </div>

    </div>

    <div class="col-sm-4">

      <div class="card">

        <img src="https://via.placeholder.com/250X100" class="card-img-top" alt="...">

        <div class="card-body">

          <h5 class="card-title">Card title</h5>

          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

          <a href="#" class="btn btn-primary">Go somewhere</a>

        </div>

      </div>

    </div>

  </div>

  <div class="row mt-5">

    <div class="col-sm-12">

      <div class="card">

        <div class="card-body">

          <h5 class="card-title">Table</h5>

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

                {{ country.name }}

              </td>

              <td>{{ country.area | number }}</td>

              <td>{{ country.population | number }}</td>

            </tr>

            </tbody>

          </table>

        </div>

      </div>

    </div>

  </div>

</div> 

Leave a Reply

Your email address will not be published. Required fields are marked *