Tribute Page: Center and resize image works with Bootstrap 5 locally but generates test error with codepen

Hello,

I centered and resized the image via Bootstrap 5, using class “container” for the “main” tag and class “text-align” for the “figure” tag. This worked locally on my computer but generated an error inside the test environment at codepen. So I had to add extra to my CSS stylesheet:

#image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

My question: Did I something wrong in Bootstrap? Or did I maybe use a code snippet from the relatively new Bootstrap 5 that the test environment did not foresee? (My tribute page)

Thanks, Peter

It’s just a test requirement that the img element is set to display: block (which changes how you can center it).

If you want to do it only using Bootstrap you can add the classes mx-auto d-block to the img element.

I understand. Thank you also for the solution in the Bootstrap version.