Design comparison
Solution retrospective
I had a chance to learn about bootstrap container , spacing , button , border and gained a lot of knowledge about bootstrap framework. Even though , I may not exhibit the clear development structure , I got to know more about Bootstrap framework.
What challenges did you encounter, and how did you overcome them?In this solution , I could say that the most difficult part for me is customizing some bootstrap components. Some can customize but in some case , I can't . In that case , I had to make custom css style for those contents.
Community feedback
- @JamesWallison1Posted 7 months ago
Seeing that you have made lots of progress, really impressive! But there are some advices I think you can fix for a more good-looking solution.
- For the first one: it is highly recommended that you adjust the padding of the elements as well as the container, this helps out a lot to be compared with the challenge's images.
- Secondly: Your class name right now is a bit too long and may cause to mistakes during writing codes so please shorten it
- Thirdly: Seeing that for each elements of the container, you are linking it with a "long name" class (row justify-content-md-center justify-content-center align-items-center). There is a way to shorten this: Just make a class and put all the whole elements in it, here are the fixed code you can consider fixing:
<div class="row justify-content-md-center justify-content-center align-items-center "> <div class="col-md-4 col-10 text-center px-6 bg-row pt-3"> <button class="btn btn-primary border-0 w-75" type="button">GitHub</button> </div> <div class="col-md-4 col-10 text-center px-6 bg-row pt-3"> <button class="btn btn-primary border-0 w-75" type="button">Frontend Mentor</button> </div> <div class="col-md-4 col-10 text-center px-6 bg-row pt-3"> <button class="btn btn-primary border-0 w-75" type="button">LinkedIn</button> </div> <div class="col-md-4 col-10 text-center px-6 bg-row pt-3"> <button class="btn btn-primary border-0 w-75" type="button">Twitter</button> </div> <div class="col-md-4 col-10 text-center px-6 bg-row pt-3 py-5 border rounded-bottom" id="border-dark"> <button class="btn btn-primary border-0 w-75" type="button">Instagram</button> </div> </div> </div>
And you are good to go, thank you very much for reading this small comment, your project is successful and I hope those advices I gave you can help you on your way of becoming a successful developers. Again thank you for take time reading this comment!
Marked as helpful0@marlar-tzPosted 7 months agoThank you for you helpful advice and I am taking your suggestion into account. And thank you again for thoughtful feedback.@JamesWallison1
1
Please log in to post a comment
Log in with GitHubJoin 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