Bootstrap 3 cards align horizontally

Question

I want card type structure horizontally in Bootstrap. Something like this and need pagination too for more cards.

Can anyone help me with this design

Answer 1

 .card{ border:1px solid #ccc; border-radius:0.5rem; padding:1rem; box-shadow: 0 0 10px #ccc; box-shadow:0 0 10px #ccc; transition: all 0.2s; }.card:hover{ transform: scale(1.1); } @media screen and (max-width: 568px) {.card{ margin:1rem; }.card:hover{ transform: none; } }

 <div class="container"> <div class="row"> <div class="col-sm-3"> <div class="card"> <h3>Exam Preparation</h3> <p>The mind Map for Physics Preparation</p> <div class='btn-toolbar'> <button class="btn btn-sm btn-primary">Edit</button> <button class="btn btn-sm btn-primary">Delete</button> <button class="btn btn-sm btn-primary">share</button> </div> </div> </div> <div class="col-sm-3"> <div class="card"> <h3>Exam Preparation</h3> <p>The mind Map for Physics Preparation</p> <div class='btn-toolbar'> <button class="btn btn-sm btn-primary">Edit</button> <button class="btn btn-sm btn-primary">Delete</button> <button class="btn btn-sm btn-primary">share</button> </div> </div> </div> <div class="col-sm-3"> <div class="card"> <h3>Exam Preparation</h3> <p>The mind Map for Physics Preparation</p> <div class='btn-toolbar'> <button class="btn btn-sm btn-primary">Edit</button> <button class="btn btn-sm btn-primary">Delete</button> <button class="btn btn-sm btn-primary">share</button> </div> </div> </div> <div class="col-sm-3"> <div class="card"> <h3>Exam Preparation</h3> <p>The mind Map for Physics Preparation</p> <div class='btn-toolbar'> <button class="btn btn-sm btn-primary">Edit</button> <button class="btn btn-sm btn-primary">Delete</button> <button class="btn btn-sm btn-primary">share</button> </div> </div> </div> </div> </div>