QR Code - Solution

1. You can set the container in the middle of the screen then whatever changes user makes can be added in properties of the styles.css later on to perfect it.
2. You can add the .container { display: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); } .

You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS: .container { display: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); } the new feature is transform, it has many lovely properties you can discover, I personally love it

You actually do not need bootstrap for this challenge as it is a single component that can be done using CSS. You could center your component by using:

html, body { 
 min-width: 100%;
 min-height: 100%;
 display: flex; 
 justify-content: center; 
 flex-direction column;
}

You could also add a box-shadow on the card component to make it look like the design.

.card { box-shadow: 0px 5px 7px var(--color); } /* where --color is your chosen color*/

Your solution does not include semantic HTML. For example, you could wrap your component in an article element which will be placed in a main element to make it more semantically acceptable.