title: Setting Bootstrap buttons to the same width
body: <p>I have a bootstrap sidebar that contains a couple buttons. Unfortunately, it looks very ugly and I want each button to be the same size.
  These buttons are contained in a sidebar and will be stack vertically. I want to avoid setting a pixel number for each button. <br> Here is the jfiddle<br>
  <a href="https://jsfiddle.net/66bk2rfc/" rel="noreferrer">https://jsfiddle.net/66bk2rfc/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="reading-sidebar" class="col-xs-3 panel-default"&gt;
    &lt;div id="reading-sidebar-title" class="panel-heading"&gt;Options
      &lt;button type="button" class="btn btn-xs btn-default pull-right" id="reading-sidebar-hide-btn"&gt;&lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;&lt;/button&gt;
        &lt;/div&gt;
        &lt;div id="reading-sidebar-contents" class="panel-body"&gt;
          &lt;ul class="sidebar-button-list"&gt;
            &lt;button type="button" id="pre-reading-btn" class="btn btn-default pull-left"&gt;&lt;i class="glyphicon glyphicon-minus"&gt;&lt;/i&gt;&amp;nbsp;Pre Readings&lt;/button&gt;&lt;br&gt;
            &lt;button type="button" id="passage-btn" class="btn btn-default pull-left"&gt;&lt;i class="glyphicon glyphicon-minus"&gt;&lt;/i&gt;&amp;nbsp;Passage&lt;/button&gt;&lt;br&gt;
            &lt;button type="button" id="post-reading-btn" class="btn btn-default pull-left"&gt;&lt;i class="glyphicon glyphicon-minus"&gt;&lt;/i&gt;&amp;nbsp;Post Readings&lt;/button&gt;&lt;br&gt;
            &lt;button type="button" id="media-btn" class="btn btn-default pull-left"&gt;&lt;i class="glyphicon glyphicon-minus"&gt;&lt;/i&gt;&amp;nbsp;Media&lt;/button&gt;&lt;br&gt;
            &lt;button type="button" id="question-btn" class="btn btn-default pull-left"&gt;&lt;i class="glyphicon glyphicon-minus"&gt;&lt;/i&gt;&amp;nbsp;Questions&lt;/button&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
  </code></pre>