0

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>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
InFlames82
  • 493
  • 6
  • 17

1 Answers1

0

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>
Meher Ullah Khan Raj
  • 371
  • 1
  • 5
  • 13