Submitted about 2 years ago

QR Code Generator Component Using Bootstrap

bootstrap

Joby Chacko•10

@jobychacko2001

A solution to the QR code component challenge

Preview Code

Code

Please log in to post a comment

Community feedback

Abdul Khaliq 🚀•72,380
@0xabdulkhaliq
Posted about 2 years 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.
CSS 🎨:
- Let me explain, How you can easily center the component for better layout without usage of absolute positioning.
- We don't need to use absolute to center the component both horizontally & vertically. Because using absolute will not dynamical centers our component at all states
- 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 this demonstration we use css Grid to center the component using bootstrap utility classes
```
<body class="d-flex justify-content-center align-items-center min-vh-100">
  <div>
   </div>
  
  <div class="attribution">
</div>
</body>
```
- Now remove these utility classes, after removing you can able to see the changes
```
<div class="position-absolute top-50 start-50 translate-middle">
```
- Now your component has been properly centered.
.

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

Happy coding!
Marked as helpful

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