In my personal portfolio, there is a dedicated page for showcasing various projects using Bootstrap cards. These projects are fetched from a CardData.js file and then mapped to a ProjectCard component. Ideally, I want to display 3 cards per row with consistent margins and spacing. However, when the number of cards exceeds 3, they end up getting squeezed into a single row.
Any assistance or suggestions would be highly appreciated!
- Projects.js (Page component):
import '../../App.css';
import './projects.css';
import { CardData } from './CardData.js';
// TODO: Update layout to ensure proper alignment of cards
class Projects extends Component {
render() {
return (
<div id="project-div">
<Navbar ... />
<h1 id="header-projects" className="font-weight-bold text-uppercase text-center ">Projects</h1>
...
</div>
)
}
}
- Projects.css:
#project-div {
background-color: transparent;
background-image: url("../../img/topography.png");
width: 100vw;
height: 100vh;
}
...
@media (min-width: 1000px)
{
.project-cards {
max-width: 40rem;
}
}
- ProjectCards.js (Component for actual cards):
class ProjectCards extends Component {
render() {
return (
<div className="card mx-auto project-cards rounded border shadow">
...
</div>
)
}
}
- ProjectCard.css:
.project-cards {
overflow: hidden;
display: inline-block;
text-align: center;
...
}