How to use Bootstrap With Angular

Introduction

Bootstrap makes a developer's life easy while developing the application with realistic UI. It is tough to set up the UI manually or ask another developer to set up the basic layout. However, by using Bootstrap, developers can set the application's basic layout Easly.

Bootstrap provides breakpoints, containers, grids, column structures, forms, content, and components. Obviously, to create a customized template or design, you need to write custom CSS code and JavaScript functions, but Bootstrap is fully flexible, and you can write your custom CSS and JS functions along with Bootstrap. Let's check out how we can add a bootstrap to the angular application.

Step 1. Create a new Angular Application using the below command.

ng new your-application-name

In this article, I have used employee shift management for demo purposes. I have used the below command to create a new angular application.

ng new employee-shift-management

Step 2. Add controls to the application page.

Add the controls or forms based on the requirements of your application. In this demo, I have used employee shift management, so I added a field called Employee name, type, shift, and shift date. Check out the sample code before adding the bootstrap classes and also preview for the same.

app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Employee } from './Models/employee.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  title = 'Employee Shift Management';
  employeeShiftForm!: FormGroup;
  lstEmployee: Employee[] = [];

  ngOnInit(): void {
    this.employeeShiftForm = new FormGroup({
      Name: new FormControl(null, [Validators.required]),
      Type: new FormControl(null, [Validators.required]),
      Shift: new FormControl(null, [Validators.required]),
      ShiftDate: new FormControl(null, [Validators.required]),
    });
  }

  onSubmit() {
    // Mark all fields as touched
    this.employeeShiftForm.markAllAsTouched();

    if (this.employeeShiftForm.valid) {
      let emp: Employee = {
        Name: '',
        Type: '',
        Shift: '',
        ShiftDate: new Date()
      };

      emp.Name = this.employeeShiftForm.get('Name')?.value;
      emp.Type = this.employeeShiftForm.get('Type')?.value;
      emp.Shift = this.employeeShiftForm.get('Shift')?.value;
      emp.ShiftDate = this.employeeShiftForm.get('ShiftDate')?.value;

      this.lstEmployee.push(emp);
    } else {
      console.log('Invalid Form values');
    }
  }
}

app.component.html

<html>

<head>

</head>

<header>
  <h1>Employee Shift Management</h1>
</header>

<div>
  <h2>Add Employee</h2>
  <form [formGroup]="employeeShiftForm" (ngSubmit)="onSubmit()">
    <table>
      <tr>
        <td>Employee Name</td>
        <td>
          <input type="text" name="Name" formControlName="Name">
          <div *ngIf="employeeShiftForm.controls.Name.touched && employeeShiftForm.controls.Name.errors?.required">
            <span>Please enter name.</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>Employee Type</td>
        <td>
          <select id="idEmpType" formControlName="Type" style="width: 100%;">
            <option value="1">Manager</option>
            <option value="2">Plant Head</option>
            <option value="3">Supervisor</option>
            <option value="4">Labour</option>
          </select>
          <div *ngIf="employeeShiftForm.controls.Type.touched && employeeShiftForm.controls.Type.errors?.required">
            <span>Please select Type.</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>Employee Shift</td>
        <td>
          <select id="idEmpShift" formControlName="Shift" style="width: 100%;">
            <option value="1">First Shift</option>
            <option value="2">Second Shift</option>
            <option value="3">Third Shift</option>
          </select>
          <div *ngIf="employeeShiftForm.controls.Shift.touched && employeeShiftForm.controls.Shift.errors?.required">
            <span>Please select Shift.</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>Shift Date</td>
        <td>
          <input type="date" name="EmployeeDateOfJoin" formControlName="ShiftDate" style="width: 100%;">
          <div *ngIf="employeeShiftForm.controls.ShiftDate.touched && employeeShiftForm.controls.ShiftDate.errors?.required">
            <span>Please select Shift Date.</span>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <input type="button" name="EmployeeDateOfJoin" value="Cancel">
          <button type="submit">Submit</button>
        </td>
      </tr>
    </table>
  </form>
</div>

<div>
  <h2>List of Employees</h2>
  <table border="1">
    <tr>
      <th>No</th>
      <th>Name</th>
      <th>Employee Type</th>
      <th>Shift</th>
      <th>Date Of Join</th>
    </tr>
    <tr *ngFor="let employee of lstEmployee; let i = index">
      <td>{{ i + 1 }}</td>
      <td>{{ employee.Name }}</td>
      <td>{{ employee.Type }}</td>
      <td>{{ employee.Shift }}</td>
      <td>{{ employee.ShiftDate }}</td>
    </tr>
  </table>
</div>

<footer>
  <span>Footer Text!</span>
</footer>

</html>

Below is the preview without bootstrap. I only used table structure and form controls.

Bootstrap

Step 3. Install Bootstrap.

Use the below command to install bootstrap and bootstrap icons.

npm i bootstrap bootstrap-icons

Install Bootstrap

Step 4. Add ng bootstrap.

Once the bootstrap is installed, add the ng-bootstrap. Below is the command to add ng-bootstrap. Here, we are using ng add instead of npm i. because it will install ng-bootstrap for the default application specified in your angular.json. If you have multiple projects and you want to target a specific application, you could specify the --project option.

ng add @ng-bootstrap/ng-bootstrap

Ng bootstrap

Step 5. Import Bootstrap to style.scss file at the root level.

Once the bootstrap install and add are completed now need to add a reference of the bootstrap file to the app.module.ts file and also need to import CSS and JS file references to the styles.scss file.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import CSS

styles.scss

/* You can add global styles to this file, and also import other style files */

/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap';

Style CSS

Step 6. Add bootstrap class to controls.

Just install Bootstrap and add references to the angular application. Before adding any new class, check the effect of Bootstrap with the below screen print.

Angular application

Now, let’s add a bootstrap class and see how it works.

Step 7. Check the Screen reflects changes.

app.component.html

<!DOCTYPE html>
<html>

<head>
</head>

<header>
  <h3 class="m-4 p-2">Employee Shift Management</h3>
</header>

<div class="container m-4">
  <div class="row">
    <div class="col-md-6">
      <h4>Add Employee</h4>
      <form [formGroup]="employeeShiftForm" (ngSubmit)="onSubmit()">
        <div>
          <label class="form-label">Employee Name</label>
          <input type="text" name="Name" class="form-control" formControlName="Name">
          <div *ngIf="employeeShiftForm.controls.Name.touched && employeeShiftForm.controls.Name.errors?.required">
            <span class="text-danger">Please enter name.</span>
          </div>
        </div>
        <div>
          <label class="form-label">Employee Type</label>
          <select id="idEmpType" formControlName="Type" class="form-control">
            <option value="Manager">Manager</option>
            <option value="Plant Head">Plant Head</option>
            <option value="Supervisor">Supervisor</option>
            <option value="Labour">Labour</option>
          </select>
          <div *ngIf="employeeShiftForm.controls.Type.touched && employeeShiftForm.controls.Type.errors?.required">
            <span class="text-danger">Please select Type.</span>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Employee Shift</label>
          <select id="idEmpShift" formControlName="Shift" class="form-control">
            <option value="First Shift">First Shift</option>
            <option value="Second Shift">Second Shift</option>
            <option value="Third Shift">Third Shift</option>
          </select>
          <div *ngIf="employeeShiftForm.controls.Shift.touched && employeeShiftForm.controls.Shift.errors?.required">
            <span class="text-danger">Please select Shift.</span>
          </div>
        </div>
        <div class="form-group mb-2">
          <label class="form-label">Shift Date</label>
          <input type="date" name="EmployeeDateOfJoin" formControlName="ShiftDate" class="form-control">
          <div *ngIf="employeeShiftForm.controls.ShiftDate.touched && employeeShiftForm.controls.ShiftDate.errors?.required">
            <span class="text-danger">Please select Shift Date.</span>
          </div>
        </div>
        <div>
          <button type="submit" class="btn btn-primary col-md-2 m-1">Save</button>
          <button type="button" class="btn btn-primary col-md-2 m-1">Reset</button>
        </div>
      </form>
    </div>

    <div class="col-md-6">
      <h4>List of Employees</h4>
      <table class="table table-striped">
        <thead class="thead-dark">
          <tr>
            <th scope="col">No</th>
            <th scope="col">Name</th>
            <th scope="col">Employee Type</th>
            <th scope="col">Shift</th>
            <th scope="col">Shift Date</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let employee of lstEmployee; let i = index">
            <td>{{ i + 1 }}</td>
            <td>{{ employee.Name }}</td>
            <td>{{ employee.Type }}</td>
            <td>{{ employee.Shift }}</td>
            <td>{{ employee.ShiftDate }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<footer class="navbar fixed-bottom text-center">
  <div class="container">
    <span>Employee Shift Management Footer! Copyright - 2024</span>
  </div>
</footer>

</html>

Desktop Browser

Desktop Browser

Mobile View

Mobile View

Summary

In this article, we have learned about bootstrap integration with angular applications. It made it easy to create applications with smooth UI with less effort. Bootstrap supports mobile responsiveness. So, no extra effort is required for the mobile view. If any customized design or component is required, then the bootstrap is so flexible that you can customize it. You can also design your component using Bootstrap.