如何在不居中对齐内部文本的情况下居中对齐引导卡？

Question

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.

This is what I have right now --> https://i.imgur.com/f06m0Qc.png

<div class="card col-33" style="width: 16rem; margin-right: 2rem;">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         <a href="#" class="card-link">Card link</a>
         <a href="#" class="card-link">Another link</a>
             </div>
<div class="card col-33" style="width: 16rem; margin-right: 2rem;">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         <a href="#" class="card-link">Card link</a>
         <a href="#" class="card-link">Another link</a>
             </div>
<div class="card col-33" style="width: 16rem; margin-right: 2rem;">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         <a href="#" class="card-link">Card link</a>
         <a href="#" class="card-link">Another link</a>
             </div>

The style that I am wanting to achieve is this --> https://i.imgur.com/PaonbTR.png

Not worried about the style right now as I can change that in CSS.

Answer 1

Put your code into a div and add a class name for example "centered" Your CSS may look like this :

.centered {
    margin-right:auto; 
    margin-left:auto ; 
}
 

Answer 2

Please check below link. Hope this help. thanks

http://jsfiddle.net/3vxtw786/ 777

I have added a parent dive with outer class and gave dispaly: flex and justify-content:center . this will bring all the dive in the center

below is the link for your ref.https://www.w3schools.com/cssref/css3_pr_justify-content.asp