Hello, I have this web page, and the problem is that I wanted to show the two rows in two separate rows and not as two columns, which is how it is shown. In other words, I want a row to appear with color danger
and to say "i'm vertically centered" and below another row with color warning
and to also say "i'm vertically centered". And of course both rows are centered vertically.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid d-flex h-100">
<div class="row align-items-center bg-danger w-100">
<div class="col-6 mx-auto bg-info">
I'm vertically centered
</div>
</div>
<div class="row align-items-center bg-warning w-100">
<div class="col-6 mx-auto bg-info">
I'm vertically centered
</div>
</div>
</div>
</body>
</html>
If instead of d-flex
putting d-block
it in the container, it appears in two different rows but it does not appear vertically aligned to the center. By the way, in the browser (both in firefox and in chrome) the two rows (the danger and the warning) occupy the entire height of the screen, something that does not happen in the snippet.
You can do something like this:
The container should not be display: flex, and the rows are always display: flex by default, so it works by only adding an align-items center to the rows, then to each row I put an h-50 which is equivalent to height : fifty%; In this way there are 2 Rows one above the other, with their cols inside aligned vertically.
I hope it helps you.
Finally I saw that you have cols of 6, so you are using mx-auto to center them, that works, maybe you could also use justify-content-center since you are using flexbox. It would look like this:
The first row is made with justify-content-center and the second with mx-auto. In these cases it would already be centered horizontally and vertically.