title: How can I center align bootstrap cards without center aligning the text inside?
body: <p>I am using the code provided by bootstrap for the cards on their website but cannot seem to center align the cards to my page without also aligning the text within the cards.</p>
  
  <p>This is what I have right now --> <a href="https://i.imgur.com/f06m0Qc.png" rel="nofollow noreferrer">https://i.imgur.com/f06m0Qc.png</a></p>
  
  <pre><code>&lt;div class="card col-33" style="width: 16rem; margin-right: 2rem;"&gt;
     &lt;div class="card-body"&gt;
        &lt;h5 class="card-title"&gt;Card title&lt;/h5&gt;
        &lt;h6 class="card-subtitle mb-2 text-muted"&gt;Card subtitle&lt;/h6&gt;
         &lt;p class="card-text"&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
           &lt;a href="#" class="card-link"&gt;Card link&lt;/a&gt;
           &lt;a href="#" class="card-link"&gt;Another link&lt;/a&gt;
               &lt;/div&gt;
  &lt;div class="card col-33" style="width: 16rem; margin-right: 2rem;"&gt;
     &lt;div class="card-body"&gt;
        &lt;h5 class="card-title"&gt;Card title&lt;/h5&gt;
        &lt;h6 class="card-subtitle mb-2 text-muted"&gt;Card subtitle&lt;/h6&gt;
         &lt;p class="card-text"&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
           &lt;a href="#" class="card-link"&gt;Card link&lt;/a&gt;
           &lt;a href="#" class="card-link"&gt;Another link&lt;/a&gt;
               &lt;/div&gt;
  &lt;div class="card col-33" style="width: 16rem; margin-right: 2rem;"&gt;
     &lt;div class="card-body"&gt;
        &lt;h5 class="card-title"&gt;Card title&lt;/h5&gt;
        &lt;h6 class="card-subtitle mb-2 text-muted"&gt;Card subtitle&lt;/h6&gt;
         &lt;p class="card-text"&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
           &lt;a href="#" class="card-link"&gt;Card link&lt;/a&gt;
           &lt;a href="#" class="card-link"&gt;Another link&lt;/a&gt;
               &lt;/div&gt;
  </code></pre>
  
  <p>The style that I am wanting to achieve is this --> <a href="https://i.imgur.com/PaonbTR.png" rel="nofollow noreferrer">https://i.imgur.com/PaonbTR.png</a></p>
  
  <p>Not worried about the style right now as I can change that in CSS. </p>