How do i center horizontally and vertically in react bootstrap

JavaScript
1

Here is my code

image
image1440×900 143 KB
.

  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 ?

2

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.

3

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

4

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.

https://www.w3schools.com/howto/howto_css_center-vertical.asp

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.