react bootstrap card in grid
Home » React JS » React-bootstrap card – how to show cards in a grid?

React-bootstrap card – how to show cards in a grid?

by

I had to build a website recently that used react-bootstrap and had a page which showed a collection of items in a grid, with each item being shown in it’s own <Card />. The documentation wasn’t as comprehensive as I’d have liked for this specific use case and I found a lot of other people on Stackoverflow asking the same question – namely “how can I show react-bootstrap cards in a grid and control how many per row”. So I’ve put together an example here showing how to do that. My example uses react-bootstrap (I’ve written a post before about using Bootstrap with react) and explains how to show the Card component in a grid.

This example presumes that you know how to build a React app and the basics of building components. In this example we’ll build a component which gets some data and then navigates the data to create a set of cards arranged in a grid.

Setting up the grid in the React component

The behaviour you want for your cards and grid may vary a little from this, but this should give you the foundation you need to understand how it works and therefore to create your own custom component. I wanted my cards to be shown in a grid of 4 columns, and for the 4 columns to reduce to 1 column on mobile devices. Most of the control of this is done in this line of code:

          <Row xs={1} md={columnsPerRow}>

The roles of xs and md are fully described in the react-bootstrap documentation here. The value of columnsPerRow is specified at the top of the file, as 4. If you change that to 3 and save, your website will reload with only 3 columns showing in the grid.

import React, { useEffect, useState } from 'react';
import apiData from '../services/wordpressApi';
import parse from "html-react-parser";

import "bootstrap/dist/css/bootstrap.min.css";
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Container from 'react-bootstrap/Container';
import Card from 'react-bootstrap/Card';

export default function PostTitles({numberOfPosts}) {
    const [posts, setPosts] = useState([]);
    const columnsPerRow = 4;

    const getPostsData = async () => {
        try {
          await apiData
            .getPosts(numberOfPosts)
            .then((data) => {    
              setPosts(data.json);
            });
        } catch (err) {
          console.log(err);
        }
      };

      const getColumnsForRow =()=>{
        let items = posts.map((post, index) => {
          return ( 
            <Col>
            <Card key={post.id}>
            <Card.Body>
              <Card.Title>{parse(post.title.rendered)}</Card.Title>
              <Card.Subtitle className="mb-2 text-muted">{post.categories[0]}</Card.Subtitle>
              <Card.Text>
                {parse(post.excerpt.rendered)}
              </Card.Text>
              <Card.Link href={post.link}>View post</Card.Link>                 
            </Card.Body>
          </Card>
        </Col>
          );
   
      });
      return items;
    };

    useEffect(() => {
        getPostsData();        
   })

  return (
    <Container>
          <Row xs={1} md={columnsPerRow}>
             {getColumnsForRow()}
          </Row>
      </Container>  
      );
  
};

We then need to use this component in the App.js page like this:

import "./App.css";
import PostTitles from "./components/PostTitles";

function App() {
  return (
    <div className="App">
      <header className="App-header">React JS WordPress api example</header>
      <PostTitles numberOfPosts="18" />
    </div>
  );
}

export default App;

You will notice that we specify the number of posts to show on the same line that we reference the component.

Summary – react bootstrap grid of cards

This is all you need to know to build a react bootstrap card grid, in a responsive website and it is easy to change the number of columns in the grid.