How to make a floating button not to overlap the footer area and stop the button on the top of where the footer is located using Bootstrap in Nextjs

Using Bootstrap in Next.js and I have a floating button in a certain page that I cant make the button stop before the footer area and I cant find any thing in the Bootstrap docs to prevent the button from overlapping the footer.

button code:

<Button variant={"primary"} onClick={handleShow}
    style={{ position: "fixed", bottom: "10px", zIndex: '99' }}>
    <FontAwesomeIcon icon={faFilter} /> Filter
</Button>

Button CSS:

display: inline-block;
font-weight: 500;
line-height: 1.5;
color: #212529;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;
transition: color 0.15s

Footer CSS:

display: flex;
flex: 1 1 auto;
flex-direction: column;
align-self: stretch;