Question 210346 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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>

cards wont move

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?

Tags:

2

Answers


  1. 0

    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>
  );
}
    Login or Signup to reply.
  2. 0

    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.
    As for the problem you’re having, what version of React and Bootstrap do you have? Could you send a snippet of the App.jsx and your index file where you’re importing bootstrap?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search