jeudi 2 janvier 2020

How to Size the Cards on bootstrap

i'm trying to size the cards deck , i have 3 cards and i'm trying to adjust them to be col-3 but it didn't work, i'm using bootstrap 4.1x version i don't know what's wrong in my code

 <div class="card-deck" style="margin-bottom: 20px;">
    <div class="card col-sm-3">
      <img class="card-img-top" src="https://images.pexels.com/photos/1181316/pexels-photo-1181316.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card col-sm-3">
      <img class="card-img-top" src="https://images.pexels.com/photos/2277784/pexels-photo-2277784.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card col-sm-3">
      <img class="card-img-top" src="https://images.pexels.com/photos/1181605/pexels-photo-1181605.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    <img src="..." alt="..." class="rounded-circle">
    <img src="..." alt="..." class="rounded-circle">
    <img src="..." alt="..." class="rounded-circle">
    </div> 

Aucun commentaire:

Enregistrer un commentaire