title: Bootstrap 5 responsive buttons placement. How?
body: <p>I have the following part of the form:</p>
  <pre><code>&lt;div class=&quot;d-grid mb-3&quot;&gt;
      &lt;button class=&quot;btn btn-primary mb-3&quot; type=&quot;submit&quot; name=&quot;userlogin&quot;&gt;Login&lt;/button&gt;
      &lt;button class=&quot;btn btn-primary mb-3&quot; onclick=&quot;window.location.href=&quot;/reset.php&quot; name=&quot;rstpss&quot;&gt;Reset&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Button <code>rstpss</code> is conditional and appears only in case user has entered wrong login or wrong password at the same time.</p>
  <p>Both buttons currently use 100% of <code>div</code>'s width and placed strictly one below another.</p>
  <p>But I want the <code>rstpss</code> button to be placed below the <code>userlogin</code> one only in case there is no available predefined <code>div</code>'s width to place them one next to another keeping in mind they both will take all available <code>div</code>'s width, be the same width and contain the same space between them as their bottom margins (the same margin is used with the <code>input</code> above the buttons).</p>
  <p>When only <code>userlogin</code> button is shown it must take 100% <code>div</code>'s width.</p>
  <p>I suppose it shouldn't be very difficult and must be clearly described at the Bootstripe's documentation, but I've started using Bootstrap just yesterday and just don't know what to look for. Any example I have found doesn't answer my question.</p>
  <p>A clear example will help me greatly to understand how to deal with such cases in the future. And what to search at the Bootstrap's documentation, too.</p>
  <p>Here is an example of what I am trying to achieve:</p>
  <p><a href="https://i.stack.imgur.com/Do3RK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Do3RK.png" alt="A visual example of my question" /></a></p>