bootstrap card shows vertically instead of being responsive

Question

The data variable contains all the data needed for this operation the problem is that the frontend shows card one below the other whereas I want it to show 3 or 4 in one row. I can assure that the error is not with the react or the graphql, the error is in the bootstrap or the way I am rendering the data.

I just want a responsive design so at first i have created a html css bootstrap ui which was perfectly working and was responsive but when i combined it with the data it lost its responsiveness and now it shows cards one below the other.

here is the image of how it is currentlyIt shows that there is a card but no other card along the row

Here is my code:

import React, { useState } from "react";
import { gql, useQuery } from "@apollo/client";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
const getBooksQuery = gql`
  {
    books {
      name
      id
      genre
      author {
        name
      }
      description
      rating
      image
    }
  }
`;
function BooksDisplay() {
  const { loading, error, data } = useQuery(getBooksQuery);
  var [selected, setSelected] = useState("");
  if (loading) return <p>Loading....</p>;
  if (error) return <p>Ops! Something went wrong</p>;
  return (
    <div>
      <div id="book-list">
        {data.books.map((book) => (
          <div className="container-fluid my-5 books_section">
            <div className="row">
              <div className="col-xl-3 col-lg-4 col-sm-6 col-12 mt-4">
                <div className="card h-100">
                  <img src={book.image} className="card-img-top" alt="..." />
                  <div className="card-body">
                    <h5 className="card-title font-weight-bold text-secondary">
                      {book.name}
                    </h5>
                    <span className="card-text">
                      {book.description}
                      <div className="collapse m-0" id="collapseExample">
                        <div className="card card-body border-0 p-0">
                          {book.description}
                        </div>
                      </div>
                    </span>
                    <a
                      className="card-link d-block"
                      data-toggle="collapse"
                      href="#collapseExample"
                      role="button"
                      aria-expanded="false"
                      aria-controls="collapseExample">
                      See More
                    </a>
                  </div>
                  <ul className="list-group list-group-flush">
                    <li className="list-group-item">
                      Authors:
                      <span>
                        {book.author.map((author) => author.name).join(" ")}
                      </span>
                    </li>
                    <li className="list-group-item">
                      Genre: <span>{book.genre.join(" ")}</span>
                    </li>
                    <li className="list-group-item">
                      Ratings: <span>{book.rating}</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
      {/* <BookDetail bookid={selected} /> */}
    </div>
  );
}
function BookList() {
  return (
      <div>{BooksDisplay()}</div>
  );
}

export default BookList;

Answer 1

Just put these 2 tags out of the loop < div className="container-fluid my-5 books_section"> < div className="row"> And it will work.

Answer 2

You need to iterate the columns instead of the container...

import React, { useState } from "react";
import { gql, useQuery } from "@apollo/client";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
const getBooksQuery = gql`
  {
    books {
      name
      id
      genre
      author {
        name
      }
      description
      rating
      image
    }
  }
`;
function BooksDisplay() {
  const { loading, error, data } = useQuery(getBooksQuery);
  var [selected, setSelected] = useState("");
  if (loading) return <p>Loading....</p>;
  if (error) return <p>Ops! Something went wrong</p>;
  return (
    <div>
      <div id="book-list">
          <div className="container-fluid my-5 books_section">
            <div className="row">
            {data.books.map((book) => (
              <div className="col-xl-3 col-lg-4 col-sm-6 col-12 mt-4">
                <div className="card h-100">
                  <img src={book.image} className="card-img-top" alt="..." />
                  <div className="card-body">
                    <h5 className="card-title font-weight-bold text-secondary">
                      {book.name}
                    </h5>
                    <span className="card-text">
                      {book.description}
                      <div className="collapse m-0" id="collapseExample">
                        <div className="card card-body border-0 p-0">
                          {book.description}
                        </div>
                      </div>
                    </span>
                    <a
                      className="card-link d-block"
                      data-toggle="collapse"
                      href="#collapseExample"
                      role="button"
                      aria-expanded="false"
                      aria-controls="collapseExample">
                      See More
                    </a>
                  </div>
                  <ul className="list-group list-group-flush">
                    <li className="list-group-item">
                      Authors:
                      <span>
                        {book.author.map((author) => author.name).join(" ")}
                      </span>
                    </li>
                    <li className="list-group-item">
                      Genre: <span>{book.genre.join(" ")}</span>
                    </li>
                    <li className="list-group-item">
                      Ratings: <span>{book.rating}</span>
                    </li>
                  </ul>
                </div>
              </div>
            ))}
            </div>
          </div>
      </div>
      {/* <BookDetail bookid={selected} /> */}
    </div>
  );
}
function BookList() {
  return (
      <div>{BooksDisplay()}</div>
  );
}

export default BookList;