Display React-Bootstrap Cards Side-by-Side: A Simple Guide
React-Bootstrap's Card component is a versatile building block for creating visually appealing content layouts. But sometimes you need to display cards horizontally, side-by-side, to enhance user experience and optimize space. This article will walk you through the process, providing a clear solution and helpful insights.
The Problem: Cards Stacking Vertically
By default, React-Bootstrap cards are stacked vertically, taking up the entire width of their container. This may not be ideal for showcasing multiple items or creating a more compact layout.
Example Code:
import React from 'react';
import { Card } from 'react-bootstrap';
function MyCards() {
return (
<div>
<Card>
<Card.Body>
<Card.Title>Card Title 1</Card.Title>
<Card.Text>Some quick example text.</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Body>
<Card.Title>Card Title 2</Card.Title>
<Card.Text>Some quick example text.</Card.Text>
</Card.Body>
</Card>
</div>
);
}
export default MyCards;
This code will render two cards stacked on top of each other.
Solution: Flexbox for Horizontal Arrangement
The key to achieving a side-by-side card display is using Flexbox. Here's how:
Modified Code:
import React from 'react';
import { Card, Row, Col } from 'react-bootstrap';
function MyCards() {
return (
<Row className="g-3">
<Col xs={12} md={6}>
<Card>
<Card.Body>
<Card.Title>Card Title 1</Card.Title>
<Card.Text>Some quick example text.</Card.Text>
</Card.Body>
</Card>
</Col>
<Col xs={12} md={6}>
<Card>
<Card.Body>
<Card.Title>Card Title 2</Card.Title>
<Card.Text>Some quick example text.</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default MyCards;
Explanation:
Row
andCol
components: React-Bootstrap'sRow
andCol
components provide a convenient way to implement Flexbox layouts.className="g-3"
: This class adds horizontal spacing (gutter) between the cards.xs={12} md={6}
: These props control how the columns resize on different screen sizes. On small screens (xs
), each card takes up the entire width. On medium screens (md
and above), each card takes up half the width.
Additional Tips:
- Custom Spacing: Adjust the gutter size (e.g.,
g-4
for larger gaps) or add custom CSS for more precise control over spacing. - Responsive Design: Use responsive
Col
props (sm
,lg
,xl
) to tailor how the cards are displayed across different screen sizes. - Card Alignment: Control how the cards align horizontally using
justify-content-*
classes on theRow
element (justify-content-center
,justify-content-end
).
Conclusion:
By leveraging the power of Flexbox within React-Bootstrap, you can easily achieve a horizontal card layout that is both aesthetically pleasing and adaptable to different screen sizes. Remember to experiment with different layout options to find the best fit for your project's design needs.