title: Formatting 3 buttons in bootstrap (responsive)
body: <p>I'm just wondering what's the best way to format three buttons so that they show correctly on various screen sizes. So, this is what I've done so far and it looks good on 1200px width screen. </p>
  
  <p>What I've done is I used the buttons and put them into span4 classes. Like so:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row-fluid"&gt;
    &lt;div class="span4"&gt;
      &lt;a class="header-btn" href="#"&gt;Testbutton 1&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="span4"&gt;
      &lt;a class="header-btn" href="#"&gt;
        Testbutton 2
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="span4"&gt;
      &lt;a class="header-btn" href="#"&gt;Testbutton 3&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, when I shrink the screen size it looks bad and the buttons break up. </p>
  
  <p>I would like to have the buttons displayed below one another once the screen size gets too small. </p>
  
  <p>I could edit the span4 class from bootstrap but this could mess with the other layout... So should I just add a new class and make everything reponsive, or work with the bootstrap framework? </p>
  
  <p>Please advise. 
  Thanks!</p>