Answer by Mohamed Mufeed for Pagination on bootstrap cards

For pagination to work you need data. Here you specified the dataSource as an array with values 1 - 16. If you want your cards to be paginated, you need the data source for the cards: as array - in your case, 30 of them - I believe, and the template function must accept the data and return html - in your case, the HTML for one card.

For example, lets assume that your data source is something like this.

var data = [  {     id: 'motor-cards',    img: {      src: 'images/motor.jpg',      desc: 'Card image cap'    }    name: 'Yamaha example',    usd: 123456.00,    year: 2001,    km: 15000,    cm3_per_rev: 100    size_class: 'A2'  },  ...];

then you would have a template function like this

var template = function (vehicle) { return (`<div class="card" id="${vehicle.id}"><img class="card-img-top" src="${vehicle.img.src}" alt="${vehicle.img.desc}"><div class="card-body"><div class="short-data"><h5 class="card-title">${vehicle.name}</h5><h6 class="card-subtitle mb-2 text-muted">${vehicle.usd} $</h6><div class="card-footer"><i class="fas fa-calendar-alt text-center" data-toggle="tooltip" title="example"><br>${vehicle.year}</i><i class="fas fa-road text-center" data-toggle="tooltip" title="Kilométeróra állása"><br>${vehicle.km}km</i><i class="fas fa-tachometer-alt text-center" data-toggle="tooltip" title="example"><br>${vehicle.cm3_per_rev}cm³</i><i class="fas fa-id-card text-center" data-toggle="tooltip" title="example"><br>${vehicle.size_class}</i></div></div><a href="#" class="btn btn-primary" data-toggle="modal" data-target="#detailsModal">Details</a><div class="card-footer-icons"><i class="fas fa-warehouse fa-lg" data-toggle="tooltip" title="Garagehelyezés"></i><i class="fas fa-share-alt fa-lg" data-toggle="tooltip" title="Share" style="padding-left: 5px;"></i></div></div></div>`  );}

So you will not have this 30 cards in the html, instead, there will only be the container.

Full eg.

<div class="pagination-wrapper"><div id="cards-container"><!-- cards will be put here by pagination.js --></div><div id="pagination-container"><!-- the pagination controls will be put here by pagination.js --></div></div><script>var data = [  {     id: 'motor-cards',    img: {      src: 'images/motor.jpg',      desc: 'Card image cap'    }    name: 'Yamaha example',    usd: 123456.00,    year: 2001,    km: 15000,    cm3_per_rev: 100    size_class: 'A2'  },  ... // 30 of similar objects for your cards];var template = function (vehicle) { return (`<div class="card" id="${vehicle.id}"><img class="card-img-top" src="${vehicle.img.src}" alt="${vehicle.img.desc}"><div class="card-body"><div class="short-data"><h5 class="card-title">${vehicle.name}</h5><h6 class="card-subtitle mb-2 text-muted">${vehicle.usd} $</h6><div class="card-footer"><i class="fas fa-calendar-alt text-center" data-toggle="tooltip" title="example"><br>${vehicle.year}</i><i class="fas fa-road text-center" data-toggle="tooltip" title="Kilométeróra állása"><br>${vehicle.km}km</i><i class="fas fa-tachometer-alt text-center" data-toggle="tooltip" title="example"><br>${vehicle.cm3_per_rev}cm³</i><i class="fas fa-id-card text-center" data-toggle="tooltip" title="example"><br>${vehicle.size_class}</i></div></div><a href="#" class="btn btn-primary" data-toggle="modal" data-target="#detailsModal">Details</a><div class="card-footer-icons"><i class="fas fa-warehouse fa-lg" data-toggle="tooltip" title="Garagehelyezés"></i><i class="fas fa-share-alt fa-lg" data-toggle="tooltip" title="Share" style="padding-left: 5px;"></i></div></div></div>`  );}var $cardsContainer = $('#cards-container');$('#pagination-container').pagination({  dataSource: data,  pageSize: 20,  callback: function(data, pagination) {    $cardsContainer.html(template(data));  }})</script>

Note: You may need to tweak here and there according to your use case.