How do i center horizontally and vertically in react bootstrap

Here is my code


  1. As you can see that container is centered horizontally , but how do i center it vertically ??

  2. Also i want my container to take as much space as the content . How can i achieve that ?

The class to center vertically is my-auto (where “my” stands for “margin-y”, not the pronoun). As for “shrink-wrapping” the container, I’m not certain how to do that. Bootstrap grids in general are made for filling the entire width of the parent element.

Well i did this at line 15 :smiley:
<Container className = "my-auto"> , but it does not work.

The my-auto class is for centering the content of a row within a container, not the container itself. For that you use plain non-bootstrap CSS.

I do find vertical centering to be really fiddly though, it always takes me a lot of trial and error to find the right CSS incantations to get it right.