Skip to content
Submitted 29 days ago

Responsive four card feature section master with bootstrap

bootstrap
Leyanis Díaz•220
@LeyaDiaz
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I’m most proud of how I managed to replicate the desktop layout with accurate alignment and spacing between the cards. It was challenging at first, but once I figured out the right HTML structure and CSS adjustments, the design came together nicely. I also feel proud that I’m starting to apply best practices instinctively, such as using CSS custom properties and thinking mobile-first.

Next time, I would spend more time planning the layout structure before coding, especially for complex desktop designs. This could help me avoid trial-and-error and speed up the process. I’d also like to experiment more with CSS Grid to handle card arrangements more efficiently.

What challenges did you encounter, and how did you overcome them?

The main challenge was aligning the cards correctly on desktop screens, especially ensuring the center cards had the right spacing between them and balanced margins with the side cards. Initially, the cards looked uneven and the spacing felt off.

I overcame this by carefully analyzing the design and using Bootstrap’s grid system along with custom CSS media queries. Adding padding and gap adjustments inside the media query helped me achieve the desired layout. Also, limiting the paragraph width in the header improved readability and matched the design better.

What specific areas of your project would you like help with?

I would appreciate feedback on how to optimize the layout for desktop screens, particularly:

Are there more efficient ways to manage spacing between cards without relying heavily on padding and margin tweaks?

Would using CSS Grid instead of Flexbox and Bootstrap grid improve the responsiveness or maintainability of the layout?

Any tips on structuring media queries for complex multi-column layouts to keep the CSS clean and scalable?

Additionally, I’m open to suggestions on improving accessibility and semantic HTML in this kind of card-based layout.

Code

Please log in to post a comment

Log in

Community feedback

  • Harsh Kumar•3,510
    @thisisharsh7

    Great job on solving Four card feature section challenge! Your mobile-first approach and CSS custom properties reflect strong best practices.

    Suggestions:

    • Card Spacing Optimization: Instead of padding/margin tweaks (e.g., .cards { padding: 2rem }), consider CSS Grid with gap (e.g., grid-template-columns: repeat(3, 1fr); gap: 2rem) for consistent spacing. This simplifies layout management without relying on Bootstrap’s grid.
    • CSS Grid vs. Bootstrap/Flexbox: Using CSS Grid (display: grid) for .box instead of Bootstrap’s row-column system would improve maintainability. Define grid-template-areas for explicit card placement, enhancing scalability for complex layouts.
    • Single Styling Approach: Mixing Bootstrap and custom CSS (e.g., .cards styles) can lead to conflicts. Choose one method: either fully leverage Bootstrap’s utilities (e.g., p-4, mb-3) or use pure CSS for better control and consistency. Consolidate into style.css for clarity.
    • Media Query Structure: Group related styles under one @media block (e.g., @media (min-width: 1200px)) to keep CSS scalable. Use consistent min-width breakpoints (768px, 1200px).
    • Accessibility/Semantics: Use <h3> for .name instead of <h2> to maintain heading hierarchy after <h1>. Add aria-labels to images (e.g., alt="Supervisor icon").

    Tip: Add hover effects (e.g., .cards:hover { transform: scale(1.05); transition: transform 0.3s ease; }) for visual look.

    Excellent work overall!

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord