I am trying to create a react bootstrap card view, Where all cards should have some space between each other, But my created react bootstrap cards do not have the expected space between them.
I have tried to achieve the above mentioned design, here is my App.js Code
import './App.css';
import HeaderComponent from './HeaderComponent';
import FooterComponent from './FooterComponent';
import BootstrapPractice from './BootstrapPractice';
function App() {
let name = "Absar Ahmad"
let testArray = [10, 20, 30, 40];
let myObject = {
'name': "Object In JXS",
'cName': "MERN",
'Desc': "React JS Learning"
}
let status = true;
return (
<div className='main' >
<HeaderComponent />
<h1 className='text-danger'>{name}</h1>
{
testArray.map((arrayValues, i) => {
return (
<div key={i}>
{arrayValues}
</div>
)
})
}
<div>{myObject.name}</div>
<div>{myObject.cName}</div>
<div>{myObject.Desc}</div>
<div>Sum of 10 and 20= {10 + 20}</div>
{
status ? <h1 style={{ color: "red", backgroundColor: "yellow" }}>Welcome to Ternary Operator</h1> : ""
}
<div className='row'>
<CardExample />
<CardExample />
<CardExample />
<CardExample />
<CardExample />
<CardExample />
<CardExample />
</div>
<BootstrapPractice />
<FooterComponent />
</div>
);
}
export default App;
function CardExample() {
return (
<div className='cardItems'>Card Div</div>
)
}
Here is my BootstrapPractice.js Code:
import Card from 'react-bootstrap/Card';
import { Col, Container, Row, Button } from 'react-bootstrap'
function BootstrapPractice() {
return (
<Container fluid>
<Container>
<Row>
<Col className='col-12 text-center py-4'>
<h1>Our Courses</h1>
</Col>
</Row>
<Row>
<Col lg="3" md="6">
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Col>
<Col lg="3" md="6">
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Col>
<Col lg="3" md="6">
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Col>
<Col lg="3" md="6">
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Col>
<Col lg="3" md="6">
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Col>
<Col lg="3" md="6">
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
</Container>
)
}
export default BootstrapPractice;
Here is my App.css Code:
.row{
max-width: 1320px;
margin: auto;
flex-wrap: wrap;
display: flex;
}
.cardItems{
flex-basis: 23%;
margin: 1%;
height: 200px;
background-color: brown;
}
.main{
max-width: 1320px;
margin: auto;
background-color: antiquewhite;
}
Here is my HeaderComponent.js
import React from 'react'
export default function HeaderComponent() {
return (
<div>
<h1>HeaderComponent</h1>
</div>
)
}
And here is my FooterComponent.js Code
import React from 'react'
export default function FooterComponent() {
return (
<h1>Footer Component</h1>
)
}
Here is the output of my code: 
Here is what i expected it to look like
