social-link-profile with bootstrap

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!