title: Align four buttons evenly stacked with Bootstrap?
body: <p>I'm trying have have two rows of two buttons stacked on top of each other like below:</p>
  
  <pre><code>[button][button]
  [button][button]
  </code></pre>
  
  <p>These buttons need to be in the center of the screen and evenly take up the space below the picture. I am very close with the code below but cannot get them centered correctly. How would I change my code to accomplish this:</p>
  
  <pre><code>[    Image     ]
  
  [button][button]
  [button][button]
  </code></pre>
  
  <p>Also I feel like I'm making this overly complicated. Is there an easier way to stack buttons evenly in the center? Thank you!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    /*Four Button Set-up*/
        
           .buttonAnswerLeft{
              width: 25%;
              max-width: 800px;
              font-size: 25px;
              display: inline-block;
              text-align:center;    
          }
          
          .buttonAnswerRight{
              width: 25%;
              max-width: 800px;
              font-size: 25px;
              display: inline-block;
               text-align:center;
               float: left;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>     &lt;img class='image center-block' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'&gt;
                &lt;/div&gt;
          
                 &lt;div class="button-box col-lg-12 col-xs-12"&gt;
                  &lt;button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info   '&gt; Absolutely sure, I'm not going.&lt;/button&gt;
                  &lt;button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info   '&gt; Pretty sure I'm not going. &lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="button-box col-lg-12 col-xs-12"&gt;
                  &lt;button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info   '&gt; It's doubtful. &lt;/button&gt;
                  &lt;button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info   '&gt; It's a maybe. &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>