Skip to content
Submitted over 1 year ago

QR code component using Bootstrap

AbalJerind•260
@Abaljerind
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello all, i got a problem with centering the figure using bootstrap. So, i can place the figure in the top middle of the window browser using bootstrap, but what i want is that i can also make it go down right in the middle of the window using bootstrap, but i just can't, so i cheat it using margin in my app.css file so the figure can get to the center of it. Can anyone please tell me how to fix it using bootstrap?

Community feedback

  • Guo Xusheng•90
    @mvpshengPosted over 1 year ago

    hello, I just came across the same problem, and my solution is to give your component a parent tag, and make the parent tag to be a flex layout. And then you can put your component center both horizontally and vertically.

    If you don't know flex layout, check out the MDN, and learn about that. I hope this helps. Hope you doing well!

    1
    AbalJerind•260
    @AbaljerindPosted over 1 year ago

    @mvpsheng thanks for the feedback, i already give it a try, and i know that it should've been worked, but it didn't. i make a div like this that wrap the figure,

    <div class="d-flex justify-content-center flex-column align-items-center">...</div>

    yet, it still didn't work out.

    Thanks tho! Hope you doing well too!!

    0
  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

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

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

    QR iMAGE ALT TEXT 📸:

    • The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.
    • The alt with QR code is not even explaining for what the QR image need to be used.
    • So update the alt with meaningful text which explains like QR code to frontendmentor.io

    Example

    <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">

    .

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

    Happy coding!

    0
    AbalJerind•260
    @AbaljerindPosted over 1 year ago

    @0xAbdulKhalid thank you Abdul, i actually didn't pay attention to that matter very well, but thanks for point it out. You too, happy coding!

    0
    Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    @Abaljerind Glad you found it helpful ! 🤠

    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