Hola tengo esta pagina web, y el problema es que queria mostrar las dos rows en dos filas separadas y no como dos columnas que es como se muestra. Es decir quiero que aparezca una fila con color danger
y que ponga "i'm vertically centered" y debajo otra fila con color warning
y que ponga tambien "i'm vertically centered". Y que por supuesto ambas filas esten centradas verticalmente.
<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>
Si en lugar de d-flex
pongo d-block
en el contanier me aparece en dos filas distintas pero no aparece alineado al centro verticalmente.
Por cierto en el navegador (tanto en firefox como en chrome) las dos filas (la danger y la warning) ocupan todo el alto de la pantalla cosa que no sucede en el snippet.