How to fix an existing button to the bottom on mobile? (bootstrap)

Question

I have an existing button in a container in a column. I need it to change from its normal position on desktop to be fixed to the bottom of the screen on mobile.

Here is an example

#free-offer-button {
  background-color: #d97b6c;
  border-color: #d97b6c;
  border-radius: 0px;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  padding: 9px 23px;
}

<Col xs={{ span: 12, order: 2 }} md={{ span: 6, order: 1 }}>
<h3 id='first-container-header'>Treat your pet (and you).</h3>
<h3>It's on us!</h3>
<br></br>

<p>Treat your pet to a healthy treat for <strong>free</strong> to kick off your Public Goods trial membership.</p>
<p><strong>See what it's like to be a Public Goods member.</strong></p>
<ul>
  <li>Included in your bundle is free 2-week membership that gives you unlimited access to our entire collection of sustainable essentials.</li>
  <li>Take a load off. We make it easy for your to make better choices. Always included: eco-friendly products you can trust.</li>
</ul>

<div className='d-grid mt-5'>
  <Button variant="btn-block" id='free-offer-button'> Claim your free offer</Button>
</div>

</Col>

Does this answer your question? [Place button on bottom of div or screen](https://stackoverflow.com/questions/36302937/place-button-on-bottom-of-div-or-screen) — Rafael Herscovici, Dec 18 '21 at 06:06
or this https://stackoverflow.com/questions/32270496/css-align-div-in-bottom-of-screen-without-using-position-absolute — Rafael Herscovici, Dec 18 '21 at 06:07

Prem Singh · Accepted Answer · 2021-12-18T06:15:43.137

Use Media Query @media hopefully your problem will be solved.

And also use bootstrap class name class="position-fixed bottom-0"

#free-offer-button{
background-color:#d97b6c;
border-color: #d97b6c;
border-radius:0px;
color:#ffffff;
font-size:18px;
font-weight:bold;
padding:9px 23px;
}
@media only screen and (max-width: 575px) {
  #free-offer-button {
    position:fixed;
    bottom:0;
    font-size:14px;
    width:100%;
    font-weight:normal;
    border:1px solid #d97b6c;
  }
}

<Col xs={{ span: 12, order: 2 }} md={{ span: 6, order: 1 }}>
                        <h3 id='first-container-header'>Treat your pet (and you).</h3>
                        <h3>It's on us!</h3>
                        <br></br>

                        <p>Treat your pet to a healthy treat  for <strong>free</strong> to kick off your Public Goods trial membership.</p>
                        <p><strong>See what it's like to be a Public Goods member.</strong></p>
                        <ul>
                            <li>Included in your bundle is free 2-week membership that gives you unlimited access to our entire collection of sustainable essentials.</li>
                            <li>Take a load off. We make it easy for your to make better choices. Always included: eco-friendly products you can trust.</li>
                        </ul>

                    <div className='d-grid mt-5'>
                        <Button variant="btn-block" id='free-offer-button'> Claim your free offer</Button>
                    </div>

                </Col>

Thank you this is it but there is still a little space on the left of the button? It is not full width to the edge of the screen for some reason — Zio-4, Dec 18 '21 at 06:28

score 0 · Answer 2 · answered Dec 18 '21 at 06:29

0

use position :

<div className='d-grid mt-5 col-12' style="position:'relative'">
<Button variant="btn-block" id='free-offer-button' style="position:'fixed';bottom:0;"> Claim your free offer</Button>
</div>

answered Dec 18 '21 at 06:29

minabagheri

541
2
9

Fixed positioned elements are always relative to the document, not any particular parent. That `position: relative` of the parent is not needed – Pars Dec 18 '21 at 07:15

How to fix an existing button to the bottom on mobile? (bootstrap)

2 Answers2