Skip to content
Submitted 8 months ago

social-link-profile with bootstrap

Cynthia Agu•110
@cynthiachinenye
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted 8 months ago

    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!

    0
    Cynthia Agu•110
    @cynthiachinenyePosted 8 months ago

    @0xabdulkhalid yes it's useful thanks, but what about the responsive part the layout was added to make it responsive, and when using d-flex it won't be responsive

    0

Please log in to post a comment

Log in with GitHub

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