Learning by Doing: What I discovered about Bootstrap while replicating a professional Footer

Yesterday, I set myself a challenge: replicating the footer of a professional template called Mapple.

You can see the original design here: Mapple Template

💡 The "Aha!" Moment

While working on this task, I had a breakthrough regarding Bootstrap's navigation system.

Previously, I thought <nav> and .nav classes were only for the header (the top navbar). But while building the footer, I realized how efficient Bootstrap is at handling lists of links. Using the .nav and .flex-column classes, I was able to:

1. Keep the links perfectly aligned.
2. Manage spacing without writing tons of custom CSS.
3. Ensure the footer looked great even on smaller screens.

🛠️ The Challenge

The hardest part was matching the exact spacing and typography of the original design. It forced me to dive deeper into Bootstrap's spacing utilities (me-, ms-, pt-, etc.) and understand how to nest rows and columns correctly.

📦 The Result

I’m quite happy with how it turned out! It’s a small step, but it made me feel much more confident with the Bootstrap grid system.

You can check out my code here:
👉 GitHub Repository: Bootstrap TeamWork

🎓 Lesson Learned

Replicating real-world websites is the fastest way to spot your gaps and fill them. It's not just about "copying"; it's about understanding the logic behind professional layouts.

How do you guys approach learning a new framework? Do you prefer tutorials or jump straight into building?