title: how to center content inside a card- bootstrap
body: <p>I have a card in my UI but i cant figure out on how to center the content inside it</p>
  
  <pre><code>  &lt;div class="col-sm-4 pb-3"&gt;
        &lt;!-- Card --&gt;
  &lt;div class="card card-image" style="background-color:grey;"&gt;
  
    &lt;!-- Content --&gt;
    &lt;div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4"&gt;
      &lt;div&gt;
        &lt;h5 class="pink-text"&gt;&lt;i class="fas fa-chart-pie"&gt;&lt;/i&gt;Your Rewards&lt;/h5&gt;
        &lt;h3 class="card-title pt-2"&gt;&lt;strong&gt;Earned AGI&lt;/strong&gt;&lt;/h3&gt;
        &lt;div class="row"&gt;
        &lt;div class="col-lg-6"&gt;
          &lt;h3&gt;Option 1&lt;/h3&gt;
          &lt;p&gt;SNET&lt;/p&gt;
          &lt;button type="button" class="btn btn-primary btn-block px-1" id="reinvest"&gt;REINVEST&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-6"&gt;
          &lt;h3&gt;Option 2&lt;/h3&gt;
          &lt;p&gt;AGI&lt;/p&gt;
          &lt;button type="button" class="btn btn-primary btn-block px-1 " id="withdraw"&gt;WITHDRAW&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;!-- Card --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The problem seem to be the buttons which dont stay inside the card on a ipad and ipad pro</p>
  
  <p>You can view the UI im talking about here
  obedient-pan.surge.sh</p>
  
  <p>The problem i have is with the "your rewards" card on the right </p>