Using Bootstrap 5 in Android 4

Question

Cipherlab RS30 mobile scanner supports only Android 4.4.2 and I havent found upgrade. Tried to use Bootstrap 5 and Font Awesome icons in old Chrome browser (google play does not work in Android 4) using

<link rel="stylesheet" href="lib/twitter-bootstrap/css/bootstrap.css" />

@if (curUser.IsAndroid4())
  {
    <!-- this does not fix object value is not a function in Font Awesome all.js
  <script src="js/proxy.min.js"></script> -->
  }
else 
  {  // Those throw errors in Android 4
    <script src="lib/twitter-bootstrap/js/bootstrap.bundle.js"></script>
    <script src="~/lib/font-awesome/js/all.js" asp-append-version="true"></script>
  }

Most of application is in monochrome:

Also bootstrap 5 dropdowns does not open on click.

In newer Android application appears in color:

bootstrap.css file contains styles:

.text-success {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
}

.text-info {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important;
}

Maybe css variables are not supported in Android 4.

How to use applicaton also in Android 4?

Possible solutions:

1. Use modernizer (which?)

2. Use style preprocessor to replace css variables with values

3. Use css file from older bootstrap

4. Override styles like

   @if (curUser.IsAndroid4())
         {
       <style>
         .text-success {
           color: green !important;
         }
       
         .text-danger {
           color: red !important;
         }
       </style>
       }
   

and replace dropdowns with html select elements.

Scanner User-Agent is

Mozilla/5.0 (Linux; Android 4.4.2; CipherLab RS30 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.83 Mobile