Question 171384 in Html Question posted in
Some basic documentation can be found here.

What is the best way to layout an HTML footer?

I have a footer I am trying to create that provides valuable information in the bottom-right area (i.e. which db I am connected to, the current project version, and backend code version) to streamline troubleshooting. I have the layout almost structured like I want, but the only thing left I want to do is make the key, value pairs align vertically for every row while positioned at the end of the page. In other words, I want the key (or left column) to be right-aligned, and the value (or right-column) to be left-aligned. Is this possible?

Here is the desired behavior:

                                                 |
                                                 |
             "TCIS": alsdkfgjioae;asfaseighnaasig|[end of page]
          "mongoDB": master                      |
                                                 |

The footer:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<footer class="footer container-fluid mt-auto">
                <div class="row align-items-end text-muted mb-1">
                    <div class="col"></div>
                    <div class="col-auto text-center"> Powered by [Some img] </div>
                    <div class="col text-end">
                        <div> TCIS <div class="text-dark fw-bold" style="display: inline-block;"> v1.0b1.dev65+git170ae7d </div>
                        </div>
                        <div> mongoDB <div class="text-dark fw-bold" style="display: inline-block;"> master </div>
                        </div>
                    </div>
                </div>
            </footer>

(Full working project here)

Thank you

Tags:

2

Answers


  1. 0

    Since your website already uses bootstrap, one way (without adding more CSS) is to use rows and cols like so:

    <div class="row">
    <div class="col-6 text-end">mongoDB</div>
    <div class="col-6 text-start fw-bold">master</div>
</div>

    The text-start class aligns text to the left, text-end class aligns text right, and fw-bold sets the font weight to bold.

    Demo:

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<footer class="footer container-fluid mt-auto w-100">
                <div class="row align-items-end text-muted mb-1">
                    <div class="col"></div>
                    <div class="col-auto text-center"> Powered by [Some img] </div>
                    <div class="col text-end">
                      <div class="row">
                        <div class="col-6 text-end">TCIS</div>
                        <div class="col-6 text-start fw-bold">v1.0b1.dev65+git170ae7d</div>
                      </div>
                      
                      <div class="row">
                        <div class="col-6 text-end">mongoDB</div>
                        <div class="col-6 text-start fw-bold">master</div>
                      </div>
                    </div>
                </div>
            </footer>
    Login or Signup to reply.
  2. 0

    You could use the <span> element instead of <div>.

    <div class="col text-end">
    <span>
        TCIS
        <div class="text-dark fw-bold" style="display: inline-block;">v1.0b1.dev65+git170ae7d</div>
    </span>
    <span>
        mongoDB
        <div class="text-dark fw-bold" style="display: inline-block;">master</div>
    </span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search