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 Bootstrap Card component in a grid.
Prerequisites
This example presumes that you know how to create a React app and the basics of building components. In this example we’ll build a component which gets some data from an API 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 card in a grid
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.