How to install bootstrap in Ionic 6

In our ionic project, we can use the default Ionic UI, which is enough and excellent, and if somehow you want to use Angular material or bootstrap. In this tutorial, we’ll learn how to use ionic bootstrap UI.

The ng-bootstrap, allow us to use Bootstrap Components and directive in Angular. This makes it easy to use Bootstrap in your Ionic Angular project.

Bootstrap uses plain JavaScript and JQuery while Angular uses Typescript, so it would not be recommended to use Bootstrap directly in Angular/Ionic. It may cause an issue while dealing with JavaScript of Bootstrap and JQuery.

But we can still use the CSS part of it, an ng-bootstrap library that is compatible with Angular and doesn’t need JQuery. Here we using the ng-bootstrap in ionic 5 Angular projects.

In this article, we learn, how to install and add the bootstrap component in Ionic. We have to use the ng-bootstrap library to demonstrate a few examples of using the bootstrap component in Ionic.

Difference between bootstrap and ng-bootstrap ?

Both bootstrap and ng-bootstrap are front-end frameworks created by Twitter. The ng-bootstrap is built specifically for an Angular. The official definition of ng-bootstrap
“Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angular ecosystem. No dependencies on 3rd party JavaScript.”

Check the ng-bootstrap components list on the Official site of ng-bootstrap. With the release of ionic version 4, no longer limited to angular, we can create the ionic projects in different front-end frameworks like Angular, Vue, and React.

Here we are using an Ionic Angular application and if you want to know what is an angular component in our ionic Angular project, then check our previous articles on the angular component.

How to install ng-bootstrap for ionic bootstrap UI project?

We will start the Angular project and learn how to install ng-bootstrap in our Angular project.

ionic start ngBootstrapApp --type=angular
npm i @ng-bootstrap/ng-bootstrap --save

How to use ng-bootstrap component in our an Ionic/Angular project

Step 1. Importing bootstrap CSS in our project for bootstrap component style
The ng-boostrap include only component but we need to import the Bootstrap style in our project. To make the Bootstrap CSS classes available for the ng-bootstrap components in our project we need to include the Bootstrap CSS in our index.html file in src as

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

Step 2: Importing the ng-bootstrap module in our project for ionic bootstrap
Here we will import in the home.module.ts file, but if you are using the bootstrap component for more than one page then import ng-bootstrap in app.module.ts. Here we are using only in-home components only.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { HomePageRoutingModule } from './home-routing.module';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    NgbModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Now that we have imported both Bootstrap-4 style and ng-bootstrap module in our ionic bootstrap apps, now we can use any of the ng-bootstrap components it provides to us. Let’s add some ng-bootstrap components. We will use datepicker component of bootstrap in our component. Edit the home component template and its typescript file as

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic ng-bootstrap ^6.1.0
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-grid>
    <ion-row>
      <ion-col size="col-md-8">
        <ion-button fill="outline" color="primary" (click)="selectToday()">Select Today</ion-button>
        <ion-button fill="outline" color="primary" (click)="dp.navigateTo()">To current month</ion-button>
        <ion-button fill="outline" color="primary" (click)="dp.navigateTo({year: 2020, month: 7})">To Jul 2020</ion-button>
       
        <p>Simple datepicker</p>
        <ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>
      </ion-col>
      <ion-col size="col-md-4" class="ion-padding">
        <pre>Month: {{ date.month }}/{{ date.year }}</pre>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

import { Component } from '@angular/core';
import {NgbDateStruct, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  model: NgbDateStruct;
  date: {year: number, month: number};

  constructor(private calendar: NgbCalendar) {}

  selectToday() {
    this.model = this.calendar.getToday();
  }

Conclusion
In this article, we have explored how to use the bootstrap component in an Ionic angular application. We have demonstrated a few examples of the bootstrap components in Ionic.

Related posts

• How to implement an ionic slider
• Complete guide on an ionic grid with an example
• How to implement an ionic alert controller.
• How to implement an ionic table with pagination.
• How to use ionic skeleton component.
• How to create a different ionic list.