How do I make my React Bootstrap cards line up horizontally and equally spaced (also responsively if possible)
I am using Reactstrap and displaying my cards dynamically and they seem to want to stack vertically no matter what I try. Here is the component in which they are rendered:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { CardDeck } from 'reactstrap';
import { fetchMerch } from '../actions/fetchMerchAction';
import { fetchUniqueMerch } from '../actions/fetchUniqueMerchAction';
import ItemCard from './ItemCard';
import shortid from 'shortid';
class ShopHome extends Component {
componentDidMount() {
this.props.onInitMerch();
}
showItemDetailHandler = (id) => {
// console.log("*",id);
this.props.onInitUniqueMerch(id);
this.props.history.push(`detail/${this.props.id}`)
}
render() {
let cards;
if ( this.props.cards ) {
cards = Object.values(this.props.cards).map( card => (
<Link to={'/detail/' + card.id } key={`div-${shortid.generate()}`}>
<ItemCard
key={card.id}
id={card.id}
title={card.title}
price={card.price}
image={card.img}
description={card.description}
clicked={() => this.showItemDetailHandler(card.id)}
/>
</Link>
)
)
};
return (
<CardDeck>
{cards}
</CardDeck>
);
}
}
const mapStateToProps = state => {
// console.log("map props to state")
// console.log("----->",state.data.cardData)
return {
cards: state.data.cardData,
id: state.data.cardData
};
}
const mapDispatchToProps = dispatch => {
return {
onInitMerch: () => dispatch(fetchMerch()),
onInitUniqueMerch: (id) => dispatch(fetchUniqueMerch(id))
};
}
export default connect(mapStateToProps, mapDispatchToProps)(ShopHome);
Here is the card component:
import React, { Component } from 'react';
import { withRouter } from 'react-router';
import { Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle } from 'reactstrap';
import './ItemCard.css';
class ItemCard extends Component {
render() {
return (
<div>
<Card className="card-style" onClick={this.props.clicked}>
<CardImg top width="100%" src={this.props.image} alt="Card image cap" />
<CardBody>
<CardTitle >{this.props.title}</CardTitle>
<CardSubtitle>${this.props.price}</CardSubtitle>
<CardText>{this.props.description}</CardText>
</CardBody>
</Card>
</div>
);
}
}
export default withRouter(ItemCard);
Here is the ItemCard.css:
.card-style {
max-width: 30%;
}
If I give the cards a fixed size with inline styling: style={{width: 20 + 'rem'}} the cards line up horizontally but I cannot center them on the page. They line up a little to the left. I just want a three card row centered and evenly spaced.
