CODEWITHSUNDEEP
javascripttwitter-bootstrapreact-bootstrap
Harzzshest
Harzzshest

Reputation: 67

React Bootstrap.. how to specify number of columns per row?

I am working on a virtual library project and I am trying to display all books with their covers and a little overlay on hover with a button. I want the books to be displayed in rows and columns.. but my code is giving me as many books as possible on a row and then continue to the next row. I want to set a number of books per row. So in that way I can specify that my page has 10 books.. and I will have 2 rows of 5 books each. How do I change the lines of bootstrap stuff so that it behaves the way I want it to? Thank you.

<div className="container-fluid">
<div className="row">
  foundBooks
  .slice(pagesVisited, pagesVisited + booksPerPage)
  .map((book) => {
    return (
      <div className="image-container d-flex justify-content-start m-3">
        <img src={book.posters} alt={book.title} style={{maxHeight: 350}}/>
        <div className="overlay d-flex align-items-center justify-content-center">
          <Button variant="primary" onClick = {() => history.push(`/books/${book.books_id}`)}>Details</Button>
        </div>
      </div>
    );
  });
</div>
</div>

Upvotes: 0

Views: 3375

Answers (1)

Zion Ay
Zion Ay

Reputation: 301

With bootstrap version 5, there is Grid cards option, where you define the container elements of all the cards as row with other class(es) row-cols-* to define how many cards should be on each row.

Link to bootstrap docs on Grid cards with example

However, with react-bootstrap, that uses bootstrap version 4.6, there is no such option on the row itself. You can achieve this behavior by setting the container element as row and wrap each book card as col with the col-* classes to define how much space it will take based on the grid system.

for example:

<Row>
  <Col xs={6} sm={4} md={3}>
    <BookCard ... />
  </Col>
  <Col xs={6} sm={4} md={3}>
    <BookCard ... />
  </Col>
  <Col xs={6} sm={4} md={3}>
    <BookCard ... />
  </Col>
</Row>

And in this way, your map method will return the col and the book as JSX.

Upvotes: 2

Related Questions