How to center a text vertically in a Bootstrap footer? - html

Question

what is the best way to create a footer in Bootstrap where in the middle (horizontally) of the screen is a text with two lines and at the end of the screen (horizontally) is a text with one line, but centered vertically?
I try to create the footer with columns and offset columns - but is it the best way? Additional I don't figured out how to center the one line.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<footer class="bg-secondary py-0 mt-auto">
<div class="container-fluid px-5">
<div class="row">
<div class="col-6 offset-3 text-center">
<div class="m-0">First Line</div>
<div class="m-0">Second Line</div>
</div>
<div class="col-3 text-end">
<div class="m-0">One Line Centered</div>
</div>
</div>
</div>
</footer>

Answer 1

Edit:
The correct way to do this in modern browsers is to use Flexbox.
See this for details.
I'm updating my code:- [I'm adding a border in each div to clear your expectation]
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<style> div{ border: 1px solid green;} </style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<footer class="bg-secondary py-0 mt-auto">
<div class="container-fluid px-5">
<div class="row">
<div class="col-6 offset-3 text-center">
<div class="m-0">First Line</div>
<div class="m-0">Second Line</div>
</div>
<div class="col-3 text-end" style="display: table; overflow: hidden;">
<div class="m-0 text-center" style="display: table-cell; vertical-align: middle;">One Line Centered</div>
</div>
</div>
</div>
</footer>