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

HTML-CSS
1

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

2

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.

3

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

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.