0

so i am using bootstrap in react and i am trying to have a gap between my cards. It usually works fine. But in this, i have no idea why it doesnt work. I have tried adding g-4 in the className to make gap. Whats probably wrong in my code?

<div className="container-md">
        <div className="row row-cols-1 row-cols-md-4 g-4 mt-4 mb-4">
          {data &&
            data.items.map((r) => {
              return (
                <div
                  key={r.id}
                  className="card text-center text-white background-color shadow-style card-style"
                >
                  <img
                    src={`https://image.tmdb.org/t/p/original${r.backdrop_path}`}
                    className="card-img-top rounded"
                    alt={r.title}
                  ></img>
                  <div className="card-body body-style">
                    <button
                      className="btn button-style text-white"
                      onClick={() => handleDeleteMovie(r.id)}
                    >
                      Delete Movie
                    </button>
                  </div>
                </div>
              );
            })}
        </div>
      </div>
sylvia_fe
  • 51
  • 6

1 Answers1

0

Try this piece of code for container-md. Hope it would work.

.container-md{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap:10px
}
R. Mahbub
  • 342
  • 6
  • 14