Bootbox alert displaying at bottom of the screen

Question

I have recently been tasked with updating my companies javascript alerts with the more customizable bootbox alerts. After messing around with it some, I have gotten an alert to appear on click of a button, however the alert appears at the bottom of the screen - so far at the bottom it extends the height of the page.

This previous question is very similar to mine: Bootbox alert displaying in the top right though not exactly. I have already tried all the solutions from there, and made sure to mess around with the values myself. One of the solutions was this:

.modal-dialog {
        left: auto;
    }

And I notice with the left keyword affects the pop up, but top/bottom do not. This is the code I am currently using(plus the includes, not shown)

<div>
    <button class ="btn btn-danger">Alert Box</button>
</div>

<script type= "text/javascript">
    $(document).ready(function (){
        $('.btn').on('click', function(){
            bootbox.prompt({
                title: "This is a prompt, vertically centered!", 
                centerVertical: true,
                callback: function(result){ 
                    console.log(result); 
                }
            });
        });
    });
    
</script>

My bootbox.min.js version in v5.5.2 and my bootstrap.min.js is v5.0.2, though I did briefly try and swtich bootstrap to v4.X, and nothing changed

Would appreciate any help

Answer 1

Was able to find the solution, or at least a work around. Was able to modify the bootbox div using the margin-top:

.bootbox{
    margin-top:-500px;
}

And that moved it 500px down from the top of the screen instead of forcing it down to the bottom