I've set up a series of reactstrap cards that are dynamically organized into rows. On "md" screen sizes and larger (bootstrap), there will be 3 cards per row, while fewer screens will display 2 cards.
Here's the component:
<Card
outline
as='a'
style={{ cursor: 'pointer', margin: '1rem' }}
>
<CardImg top width='100%' src={img}' />
<CardBody>
<CardTitle tag='h5'>{this.props.title}</CardTitle>
</CardBody>
</Card>
The issue I'm facing is that I only want the middle card to have margins on both sides (marginLeft: '1rem', marginRight: '1rem').
Since the number of cards displayed in each row changes based on screen size, I can't simply apply a style based on multiples of x. Unless I have screen size information, is there a way to create a prop in my parent component that I could pass down to the card component to determine the correct margin setting?
Thank you!
(Any alternative suggestions are appreciated)
More code:
render () {
return (
...
<div className='row' style={{margin:'0rem'}}>
{
disp.map((d, index) => {
return (
<div className='col-md-4 col-6 d-flex'>
<the card component here>
</div
)
...
}
}
</div>
....