title: Bootstrap: Make a buttons width 33% and when the window is too small 100%
body: <p>I have three buttons and I want them to be on the same line, take all the space and every button has to be the same size.<br>
  And as soon as the window is too small to show every button at at least 170px width, I want every button to have their own line and take 100% of it.<br>
  I remember seeing websites that have navigation bars which work somewhat like this..</p>
  
  <p>This is what my code currently looks like: </p>
  
  <pre><code>        &lt;div class="modal-body"&gt; 
            &lt;button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group"&gt;Button A&lt;/button&gt;&lt;span&gt;&lt;/span&gt;
            &lt;button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group"&gt;Button B&lt;/button&gt;&lt;span&gt;&lt;/span&gt;
            &lt;button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group"&gt;Button C&lt;/button&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The first part seems to work fine, but when the window gets too small, the buttons don't take 100% width on their line:  </p>
  
  <p><a href="https://i.stack.imgur.com/Xqc31.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xqc31.png" alt="enter image description here"></a></p>
  
  <p>Is there a bootstrap way to achieve that? Or is a css hack necessary?  </p>