title: HTML Bootstrap - Display two buttons 50% of the Div's width
body: <p>I have a modal window that needs to display two buttons at the bottom, say <strong>Proceed</strong> and <strong>Cancel</strong> using Bootstrap's button for this.</p>
  
  <p>I want these buttons to be side by side occupying the whole width of the div. </p>
  
  <p>If I set the width of the buttons to be <code>50%</code>, they are shown one on top of the other. Only when I set the width, say, 49% they are shown next to each other, but then they are not taking the whole width.</p>
  
  <p>I've seen this many times, but can't figure out how to do it.</p>
  
  <p>Here is a sample code of what I'm doing:</p>
  
  <pre><code>&lt;div align="center"&gt;
      &lt;button type="button" class="btn btn-warning" ng-click="Cancel()"  aria-haspopup="true" aria-expanded="false" style="width:50%"&gt;&lt;font size="6"&gt;Cancel&lt;/font&gt;&lt;/button&gt;
      &lt;button type="button" class="btn btn-success" ng-click="Proceed()" aria-haspopup="true" aria-expanded="false" style="width:50%"&gt;&lt;font size="6"&gt;Proceed&lt;/font&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>