Make a button block when in small device - html

Question

I need to have my button occupy the whole width when the view is small such as viewing it on a mobile phone. This is what I have so far...
Large Device
Medium Device
Small Device
On medium to small device, I need to have the button take up the whole block. I am not using any custom css yet. I'm just using the bootstrap default. Please see my code below:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>FAQs</li>
<li>About</li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" style="display:flex; align-items:inherit;">
<input type="text" class="form-control form-control-dark" placeholder="Username" aria-label="Username">
<input type="password" class="form-control form-control-dark" placeholder="Pasword" aria-label="Password">
<button type="submit" class="form-control btn btn-outline-light" style="margin-left: 1rem!important;">Login</button>
</form>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
#*
<div class="text-end d-sm-block gap-2">
<button type="button" class="btn btn-warning" style="width:100%; display:block;">
Sign-up
</button>
</div>*#
</div>
</div>
</header>

Answer 1

Try this.... The only change is adding d-grid gap-2 to the Div which houses your button. You may have to edit the number 2 to get your fully desired effect. With this you can probably remove the style= from your button too.
<div class="text-end d-grid gap-2">
<button type="button" class="btn btn-warning" style="width:100%; display:
block;">Sign-up</button>
</div>