How to display react-bootstrap card component side by side horizontally

2 min read 05-10-2024
How to display react-bootstrap card component side by side horizontally


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:

  1. Row and Col components: React-Bootstrap's Row and Col components provide a convenient way to implement Flexbox layouts.
  2. className="g-3": This class adds horizontal spacing (gutter) between the cards.
  3. 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 the Row 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.