CODEWITHSUNDEEP
htmlcssbootstrap-modal
addy_sk
addy_sk

Reputation: 51

HTML bootstrap footer, vertical position

so I have been using codes like float:right, margin-left, position relative/absolute to try and shift the left text and custom styled button to the right and top of the checkout button but to no avail, so I tried shifting the button instead but it still won't work. So instead of a horizontal position, I would like it to go in a vertical direction. Something like this "Total Coins ="

/* Checkout Success Modal*/
#checkoutModalBtn{
    background-color: var(--pri-color);
    color: white; 
    font-size: 1.5rem;
    margin: 0 12rem 0 auto;
    padding: 8px 14px;
    margin-top:10rem;
}
#checkoutModalBtn1{
background:white;
    font-size: 1.5rem;
    margin: 0 12rem 0 auto;
    padding: 8px 14px;
    border: none;
    outline: none;
    border-top: 1px solid #111111;
    border-bottom: 1px solid #111111;
    pointer-events: none;
    float:right;
}
.coinsTotalRow{
    float:right;
}
 <div class="modal-footer">
                <div class="coinsTotalRow">
                    <p class="checkoutTotal">Total Coins: </p>
                    <p id="checkoutcoinsTotal" onkeypress="return (this.innerText.length <= 10)">

                    <p>
                </div>
                <button type="button" href="#checkoutModal" id="checkoutModalBtn1" data-toggle="modal" class="btn btn-primary"></button>
                <button type="button" href="#checkoutModal" id="checkoutModalBtn" data-toggle="modal" class="btn btn-primary">CHECKOUT</button>
            </div>

                                              "Checkout button"

Upvotes: 0

Views: 36

Answers (1)

John
John

Reputation: 5335

Something like this work for you?

https://jsfiddle.net/zcjask9e/

/* Checkout Success Modal*/
#checkoutModalBtn{
    background-color: var(--pri-color);
    color: white; 
    font-size: 1.5rem;
    margin-top: 3rem;
    position: absolute;
}
#checkoutModalBtn1{
background:white;
    font-size: 1.5rem;
    border: none;
    outline: none;
    border-top: 1px solid #111111;
    border-bottom: 1px solid #111111;
    pointer-events: none;
  position: relative;
}
.coinsTotalRow{
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

 <div class="modal-footer">
                <div class="coinsTotalRow">
                    <p class="checkoutTotal">Total Coins: </p>
                    <p id="checkoutcoinsTotal" onkeypress="return (this.innerText.length <= 10)"></p>
                </div>
                
               
                <button type="button" href="#checkoutModal" id="checkoutModalBtn1" data-toggle="modal" class="btn btn-primary"></button> 
                
      
                <button type="button" href="#checkoutModal" id="checkoutModalBtn" data-toggle="modal" class="btn btn-primary">CHECKOUT</button>
            </div>

Upvotes: 1

Related Questions