Skip to content
Submitted over 1 year ago

social-link-profile with bootstrap

bootstrap
Cynthia Agu•110
@cynthiachinenye
A solution to the Social links profile 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 am super proud of myself on how I can make use of CSS frameworks like bootstrap to do most of my styling

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

at first, I didn't know that, a row in the bootstrap grid is like d-flex and that you can still make use of justify-content and align-items in a row but the difference is that the row adjusts itself during a responsive pattern

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

nothing much, to to understand how the bootstrap layout works to get a better responsive webpage

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    CSS 🎨:

    • Looks like the component has not been centered properly. That's simply because of nesting the component with unwanted div elements.
    <main id="main" class="min-vh-100">
     <div class="container pt-5">                          // Unwanted
       <div class="row justify-content-center ">   // Unwanted
           <div class="col-md-4 col-lg-4 ">              // Unwanted
              <div class="card text-center text-white h-100">     // Actual Component
                   ....
             </div>
          </div>
       </div>
     </div>
</main>
    • You are using Bootstrap for layout, so here's the updated html markup which might help you to center the component for both horizontally and vertically.
    • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚. For now were gonna stick with Flexbox.
    <main id="main" class="min-vh-100 d-flex justify-content-center align-items-center">
    <div class="card text-center text-white">
        <!-- Content of the card -->
    </div>
</main>
    • We added d-flex which is used to make the main container a flex container, justify-content-center to horizontally center the child elements (in this case, the card) within the flex container and align-items-center for vertically centering the child elements within the flex container.
    • Now your component has been properly centered

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

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