How to install bootstrap in Ionic

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 framework 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 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 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 Angular project and learn how to install ng-bootstrap in our an 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 import 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 ng-bootstrap module in our project for ionic bootstrap
Here we will import in home.module.ts file, but if you are using bootstrap component more than one page then import ng-bootstrap in app.module.ts. Here we are using only in home component 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 {}
ionic bootstrap example
How to use ionic bootstrap

Now that we have imported both Bootstrap-4 style and ng-bootstrap module in our ionic bootstrap apps, now we can use any of ng-bootstrap components it provides to us. Let’s add some ng-bootstrap component. We will use datepicker component of bootstrap in our component. Edit 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.

1 thought on “How to install bootstrap in Ionic”

Leave a Comment

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

Scroll to Top