Breakpoints from regular bootstrap(not react-bootstrap) doesnt work in my react app

I have this jsx

<div
   className="row"
>
              {data!== undefined && data.length !== 0 ? (
                data.map((el) => (
                  <div className="col col-lg-2 col-md-6 g-3" key={el._id}>
                    <div className="card">
                      <div className="card-body">
                        <p className="card-text fw-bold fs-5">{el.name}</p>
                      </div>
                    </div>
                  </div>
                ))
              ) : (
                <p>no data</p>
              )}
            </div>

Tried to resize my browser window and the cards didnt move, you can see the image. Why does this happen? How can I fix this?

The following code works. I guess you didn't include Bootstrap correctly in your React project.

See the live demo.

package.json

{
  "name": "stackblitz-starters-acx6ws",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@popperjs/core": "^2.11.7",
    "@types/react": "18.2.15",
    "@types/react-dom": "18.2.7",
    "bootstrap": "^5.3.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}

index.tsx

import * as React from 'react';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.css';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

App.tsx

import * as React from 'react';
import './style.css';

export default function App() {
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <button className="btn btn-success">Success</button>

      <div className="row">
        <div className="col col-lg-2 col-md-6 g-3">
          <div className="card">
            <div className="card-body">
              <p className="card-text fw-bold fs-5">Card</p>
            </div>
          </div>
        </div>
        <div className="col col-lg-2 col-md-6 g-3">
          <div className="card">
            <div className="card-body">
              <p className="card-text fw-bold fs-5">Card</p>
            </div>
          </div>
        </div>
        <div className="col col-lg-2 col-md-6 g-3">
          <div className="card">
            <div className="card-body">
              <p className="card-text fw-bold fs-5">Card</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Just as a side note, here is a suggestive cleaner code:

{ data.length && ( 
    data.map((el) => (
        <div className="col col-lg-2 col-md-6 g-3" key={el._id}>
            <div className="card">
                <div className="card-body">
                   <p className="card-text fw-bold fs-5">{el.name}</p>
                </div>
            </div>
         </div>
)}

If the array is empty or undefined, it will always turn false so there's no need to add the other conditions so this should work the same.