How to fix element to the bottom of the page?

Wappler General Need Help
1

So here is my landing page:

https://dev.fmba70.org

As you can see there is a down arrow blinking at the bottom of the page. It is in a section in a div. I would like it to remain there, however as the user scrolls down, it continues down the page to the other sections.

Any ideas to keep it within the section?

Here is my code:
html

<section class="style10" id="style10">

        <div class="jumbotron jumbotron-fluid">



            <h1 class="display-3 fmba_title">Morris Township Firefighter's Mutual Benevolent Association <br>Local 70<br></h1>
            <h2 class="lead">Proudly Serving Morris Township, NJ with Fire, EMS, and Rescue Protection since 1973</h2>
            <br>
            <a data-mdb-ripple-init="" class="btn btn-outline-light btn-lg text-center" href="#!" role="button">Learn How We Help You</a>
            <i id="downarrow" class="style15 fas fa-chevron-down"></i>
        </div>

    </section>

css

.style15 {
    color: #fff;
margin-left: 10px;
 display:inline-block;
    font-size: 40px;
    line-height: 50px;
    color:white;
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: bottom;
    position: sticky;
    left: 50%;
    right: 50%;
    position: fixed;
    bottom: 0;
}
2

Try this code instead:

<section>
    <div class="jumbotron d-flex flex-column" style="height: calc(100vh - 76px);">
        <h1 class="display-3 fmba_title">Morris Township Firefighter's Mutual Benevolent Association <br>Local 70<br></h1>
        <h2 class="lead">Proudly Serving Morris Township, NJ with Fire, EMS, and Rescue Protection since 1973</h2>
        <p class="mt-4 flex-grow-1"><a data-mdb-ripple-init="" class="btn btn-outline-light btn-lg text-center" href="#!" role="button">Learn How We Help You</a></p>
        <p class="align-self-center"><i class="fas fa-chevron-down fa-3x text-white"></i></p>
    </div>
</section>

To Explain:

<div class="jumbotron d-flex flex-column" style="height: calc(100vh - 76px);">

There is no .jumbotron in Bootstrap 5.3.3. I have changed this to a flex container instead, keeping the class .jumbotron so that the CSS still corresponds. The height has been calculated to take care of the height of the navbar.

<p class="mt-4 flex-grow-1"><a data-mdb-ripple-init="" class="btn btn-outline-light btn-lg text-center" href="#!" role="button">Learn How We Help You</a></p>

<a> is an inline element. See my video on Inline Elements. I could have changed this to a block element using .d-block, but I chose to use a <p> to wrap the <a> element. Rather than using <br> for styling, I added a top margin instead. The .flex-grow-1 pushes the rest of the content to the bottom of the containing element.

<p class="align-self-center"><i class="fas fa-chevron-down fa-3x text-white"></i></p>

Again, <i> is an inline element, hence the <p> as the containing block-level element. The .align-self-center class, centers the icon. I have added <fa-3x and text-white classes to increase the size and colour of the icon. Eliminates the need for style rules in a style sheet.

As a side note:

  1. There are 4 identical ID's in the document. This is a no-no. Change the ID's to classes.
  2. Many more improvements can be made to the document, by using Bootstrap to its fullest.

Edit: I just noticed a second <br> in the <h1>. This should be replaced by a bottom margin as in mb-4 or similar. The use of the first <br> is as it should be used.

2 Likes
3

Ben, you’re awesome!!!

Yep, I know the IDs are there. Just haven’t got to fixing it yet. Will try this as soon as I beget back to my desk.

I am very very new to Wappler even though I’ve had it for several years. This is the first real site I’m doing and I am immediately seeing the benefits.

THANK YOU!!!

2 Likes