how to make button response in bootstrap - html

Question

I have a row of buttons in the bootstrap HTML website when I open it in desktop view it works perfectly, but in mobile view, it is a mess.
here is my code :
<div class="creative ">
<div class="container" style=" padding-top: 50px">
<div class="card mt-3" style=" background-color: rgba(255,255,255,.6);">
<div class="mt-1 card-body" id="artical">
{# <h4>El Gouna</h4>#}
<a class="btn btn-primary warn" href="#about">
<span>Divecenter</span>
</a>
<a class="btn btn-primary warn" href="#about">
<span>Hotels</span>
</a>
<a class="btn btn-primary warn" href="{% url 'price_list' %}">
<span>Price & Booking</span>
</a>
<a class="btn btn-primary warn" href="#contact">
<span>Book Hotel</span>
............

Answer 1

You can use block buttons on small devices and use flexbox on larger screens like this.
.wrap {
border: 1px solid black;
max-width: 500px;
padding: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap d-grid gap-2 d-md-flex">
<button class="btn btn-primary flex-md-fill">
Button
</button>
<button class="btn btn-primary flex-md-fill">
Button
</button>
<button class="btn btn-primary flex-md-fill">
Button
</button>
</div>