For my latest project, I decided to create a web page using Cards in React. To achieve this, I utilized React Bootstrap for the card components. However, I encountered an issue with setting the flex property.
Below is a snippet of my component:
import 'bootstrap/dist/css/bootstrap.min.css';
import Card from 'react-bootstrap/Card';
import ListGroup from 'react-bootstrap/ListGroup';
import './Style.css';
import img from './images/download.jpg'
import Button from 'react-bootstrap/Button';
function MovieList() {
return (
<>
<div id="container">
<Card style={{ width: '20rem', fontSize: '10px' }} className='box'>
<Card.Header>
<Button variant="primary" style={{ width: '6rem', fontSize: '8px' }}>NOW SHOWING</Button>
</Card.Header>
...
And here is the CSS code that I am using:
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
Despite trying various methods to apply the flex property in CSS, I still couldn't achieve the desired layout for my web page with cards displayed in rows:
Here is how my current web page looks like: Web Page Example
If you have any suggestions or ideas on how to resolve this issue and display all the cards in a row format, please feel free to share!