QRcode main component using HTML, CSS and Bootstrap

How easy the challenge is but I'm an overthinker so I overthink this project and instead of finishing it within 30mins - 1hr, I finished it in 1 day. Probably next time I wont overthink much on which approach should I use.

One of the challenges I encounter is probably sizing the column, col-12 to narrowing and putting the component in the middle even though I have tried so many approaches. I solved the sizing by using the "rem" sizing instead of % or px when it come to width. And for centering the content, I place the "d-flex justify-content-center align-items-center" in the parent instead of child.