Encountering an issue with an input element inside a Bootstrap card. Trying to make it behave like the button on the second card, but it keeps shrinking and remaining in-line. I've attempted to add some CSS properties like min-width or adjusting its width, but unable to achieve the desired responsive behavior where the button stacks on top of the other at certain screen widths and also shrinks and expands.
Here is the source code on Bootsnipp along with a screenshot of the issue:
Edit: As requested, here is the code for the first card with the input:
<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
<div class="card">
<img class="card-img-top" src="https://dummyimage.com/600x600/55595c/fff" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">
<a href="product.html" title="View Product">Product title</a>
</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div class="form-row">
<div class="col">
<select class="form-control btn-block">
<option>50</option>
<option>100</option>
<option>200</option>
<option>300</option>
<option>400</option>
<option>500</option>
<option>600</option>
</select>
</div>
<div class="col">
<a href="#" class="btn btn-success btn-block">Add to cart</a>
</div>
</div>
</div>
</div>
</div>