Table-striped not working anymore after upgrading dependencies

Question

So I upgraded my package.json and after that the output of the table styling was off. It used to be striped and each cell in the table changed in color of the background. I'm thinking this might be a dependency issue as I upgrade most of them.

This is the updated package.json

{
  "name": "pipeline-viewer",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.0.0",
    "@angular/cdk": "^12.0.0",
    "@angular/common": "^12.0.0",
    "@angular/compiler": "^12.0.0",
    "@angular/core": "^12.0.0",
    "@angular/flex-layout": "^12.0.0-beta.35",
    "@angular/forms": "^12.0.0",
    "@angular/material": "^12.0.0",
    "@angular/material-moment-adapter": "^12.0.0",
    "@angular/platform-browser": "^12.0.0",
    "@angular/platform-browser-dynamic": "^12.0.0",
    "@angular/router": "^12.0.0",
    "@wizpanda/super-gif": "0.0.5",
    "angular-plotly.js": "^4.0.4",
    "bootstrap": "^5.1.3", 
    "moment": "^2.29.1",
    "plotly.js": "^2.5.1",
    "rxjs": "^7.4.0",
    "rxjs-compat": "^6.6.7",
    "zone.js": "^0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.0.0",
    "@angular/cli": "^12.0.0",
    "@angular/compiler-cli": "^12.0.0"
  }
}

This is the old package.json that has striped table components

{
  "name": "pipeline-viewer",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.1.4",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/flex-layout": "^7.0.0-beta.24",
    "@angular/forms": "~7.1.0",
    "@angular/material": "^7.3.3",
    "@angular/material-moment-adapter": "^8.1.2",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "@wizpanda/super-gif": "0.0.5",
    "angular-plotly.js": "^1.3.2",
    "bootstrap": "^4.2.1",
    "moment": "^2.24.0",
    "plotly.js": "^1.49.0",
    "rxjs": "~6.3.3",
    "rxjs-compat": "^6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.3",
    "@angular/compiler-cli": "~7.1.0"
  }
}

Here is what the HTML looks like in case I need to upgrade the way the data is being handled

<table class="table col-lg-4 col-sm-6 col-xs-12 table-striped table-bordered table-sm" >
        <tr>
          <th>Lab Name</th><td>{{ session?.lab_name }}</td>
        </tr>
        <tr>
          <th>Session Start Time</th><td>{{ session?.session_start_time.split("T")[0] }} {{ session?.session_start_time.split("T")[1] }}</td>
        </tr>
        <tr>
          <th>Task Protocol</th><td>{{ session?.task_protocol }}</td>
        </tr>
        <tr>
          <th>Session UUID</th><td>{{ session?.session_uuid }}</td>
        </tr>
        <tr>
          <th>User</th><td>{{ session?.responsible_user }}</td>
        </tr>
        <tr>
          <th>Session Project</th>
          <td>{{ session?.session_project }}</td>
        </tr>
      </table>