bootstrap - align nested row vertically within alert-box [duplicate] - html

Question

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 2 years ago.
I'm not sure if my issue is the nested row, but I can't get the inner row vertical aligned centered within it's alert-box. Anyone any hint what I'm doing wrong?
https://jsfiddle.net/d2pg4xta/
<div class="container-fluid">
<div class="row">
<div class="col-md-6 d-flex">
<div class="alert alert-dark">
<div class="row"> <!-- here is my nested row -->
<div class="col-md-6"><p class="mb-0">1:</p></div>
<div class="col-md-6"><p class="mb-0">A</p></div>
<div class="col-md-6"><p class="mb-0">2:</p></div>
<div class="col-md-6"><p class="mb-0">B</p></div>
<div class="col-md-6"><p class="mb-0">3:</p></div>
<div class="col-md-6"><p class="mb-0">C</p></div>
<div class="col-md-6"><p class="mb-0">4:</p></div>
<div class="col-md-6"><p class="mb-0">D</p></div>
</div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="alert alert-dark text-center">
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
</div>
</div>
</div>
</div>
Update: It's not about aligning the 2 alert-boxes, it's about the inside of my left alert-box. I expect the inside row containing the content (abcd1234) to be more centered withing it's own alert-box like this: https://ibb.co/myntK5j

Answer 1

Do this:
.alert-dark {
display: flex; /*add*/
flex-direction: column; /*add*/
align-items: center; /*add*/
color: #1b1e21;
background-color: #d6d8d9;
border-color: #c6c8ca;
}

Answer 2

You need to use flex on .alert-box and remove margin from .row
Js fiddle: https://jsfiddle.net/zbywdacp/
Live Demo:
.row {
background: #f8f9fa;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.alert-dark {
display: flex;
align-items: center;
justify-content: center;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 d-flex">
<div class="alert alert-dark">
<div class="row m-0">
<div class="col-md-6">
<p class="mb-0">1:</p>
</div>
<div class="col-md-6">
<p class="mb-0">A</p>
</div>
<div class="col-md-6">
<p class="mb-0">2:</p>
</div>
<div class="col-md-6">
<p class="mb-0">B</p>
</div>
<div class="col-md-6">
<p class="mb-0">3:</p>
</div>
<div class="col-md-6">
<p class="mb-0">C</p>
</div>
<div class="col-md-6">
<p class="mb-0">4:</p>
</div>
<div class="col-md-6">
<p class="mb-0">D</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="alert alert-dark text-center">
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
</div>
</div>
</div>
</div>

Answer 3

Try adding display: flex; to .alert.alert-dark.