As I begin my journey with Bootstrap, I encountered a challenge while attempting to vertically align text. The issue arises when displaying a modal window from a partial view and trying to showcase an icon and a title in the header:
Below is the page content:
<div id="actionConfirmation" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="actionModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div id="partialViewContent"> </div>
</div>
</div>
</div>
And here's the code within the partial view:
<div class="modal-header">
<div class="row">
<div class="col-md-2">
<i class="fa fa-exclamation-triangle fa-2x mx-auto" style="color:red" aria-hidden="true"></i>
</div>
<div class="col-md-10">
<h5 class="modal-title align-middle" id="actionModalLabel">Confirm Denial</h5>
</div>
</div>
</div>
The goal is to have "Confirm Denial" centered in the row, but currently it appears bottom-justified alongside the exclamation icon. Despite its perceived simplicity, I'm struggling to achieve the desired alignment.