I have a list of Java objects that needs to be displayed in bootsrap cards within div. How can I paginate the bootsrap cards using angular js or any JavaScript
For example in the below example Bootstr i have 6 cards. Now i need to iterate over the list of Java Objects from Spring rest controller and display in cards using pagination .
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-default bootcards-summary">
<div class="panel-heading">
<h3 class="panel-title">Company Management</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#finances" onclick="p('#finances')">
<i class="fa fa-3x fa-dollar"></i>
<h4>Finances <span class="label label-info">431</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#clients" onclick="p('#clients')">
<i class="fa fa-3x fa-users"></i>
<h4>Clients <span class="label label-warning">432</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#files" onclick="p('#files')">
<i class="fa fa-3x fa-files-o"></i>
<h4>Files <span class="label label-info">65</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#tasks" onclick="p('#tasks')">
<i class="fa fa-3x fa-check-square-o"></i>
<h4>Tasks <span class="label label-warning">109</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#socialmedia" onclick="p('#socialmedia')">
<i class="fa fa-3x fa-share-alt"></i>
<h4>Social Media <span class="label label-warning">110</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#growth" onclick="p('#growth')">
<i class="fa fa-3x fa-bar-chart"></i>
<h4>Growth <span class="label label-info">110</span></h4>
</a>
</div>
</div>
</div>
<div class="panel panel-default bootcards-chart cards hidden" id="finances">
<div class="bootcards-chart-canvas" id="financesChart"></div>
</div>
<div class="table-responsive cards hidden" id="clients">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Name</th>
<th>Products</th>
<th>Paid</th>
</tr>
</thead>
<tbody>
<tr>
<td>Johan Millner</td>
<td>2</td>
<td>500</td>
</tr>
<tr>
<td>Jena Torey</td>
<td>3</td>
<td>750</td>
</tr>
<tr>
<td>Jesus Da Silva</td>
<td>7</td>
<td>1750</td>
</tr>
<tr>
<td>Robert Ramsey</td>
<td>1</td>
<td>250</td>
</tr>
<tr>
<td>Ben Rosenberg</td>
<td>5</td>
<td>1250</td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td><strong>18</strong></td>
<td><strong>4500</strong></td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="files">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Files</th>
<th>Forecast</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Estimated Earning</td>
<td>$1.8M</td>
<td>Under Norm</td>
</tr>
<tr>
<td>Future Plan</td>
<td>$12M</td>
<td>2016-2020</td>
</tr>
<tr>
<td>This Year Plan</td>
<td>$0.7M</td>
<td>Under Norm</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="tasks">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Task</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr>
<td>Expand the existing offices</td>
<td>On Progress</td>
</tr>
<tr>
<td>Start working on the new plan</td>
<td>To Do</td>
</tr>
<tr>
<td>Implement Jira</td>
<td>To Do</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="socialmedia">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Name</th>
<th>Nr.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Facebook</td>
<td>2700</td>
</tr>
<tr>
<td>Twitter</td>
<td>3300</td>
</tr>
<tr>
<td>Instagram</td>
<td>2200</td>
</tr>
<tr>
<td>Email Marketing</td>
<td>1000</td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td><strong>9200</strong></td>
</tr>
</tbody>
</table>
</div>
<div class="panel panel-default bootcards-chart cards hidden" id="growth">
<div class="bootcards-chart-canvas" id="growthChart"></div>
</div>
<div class="panel-footer">
<small>Sample Company</small>
</div>
</div>
</div>
</div>
</div>div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-default bootcards-summary">
<div class="panel-heading">
<h3 class="panel-title">Company Management</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#finances" onclick="p('#finances')">
<i class="fa fa-3x fa-dollar"></i>
<h4>Finances <span class="label label-info">431</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#clients" onclick="p('#clients')">
<i class="fa fa-3x fa-users"></i>
<h4>Clients <span class="label label-warning">432</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#files" onclick="p('#files')">
<i class="fa fa-3x fa-files-o"></i>
<h4>Files <span class="label label-info">65</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#tasks" onclick="p('#tasks')">
<i class="fa fa-3x fa-check-square-o"></i>
<h4>Tasks <span class="label label-warning">109</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#socialmedia" onclick="p('#socialmedia')">
<i class="fa fa-3x fa-share-alt"></i>
<h4>Social Media <span class="label label-warning">110</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#growth" onclick="p('#growth')">
<i class="fa fa-3x fa-bar-chart"></i>
<h4>Growth <span class="label label-info">110</span></h4>
</a>
</div>
</div>
</div>
<div class="panel panel-default bootcards-chart cards hidden" id="finances">
<div class="bootcards-chart-canvas" id="financesChart"></div>
</div>
<div class="table-responsive cards hidden" id="clients">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Name</th>
<th>Products</th>
<th>Paid</th>
</tr>
</thead>
<tbody>
<tr>
<td>Johan Millner</td>
<td>2</td>
<td>500</td>
</tr>
<tr>
<td>Jena Torey</td>
<td>3</td>
<td>750</td>
</tr>
<tr>
<td>Jesus Da Silva</td>
<td>7</td>
<td>1750</td>
</tr>
<tr>
<td>Robert Ramsey</td>
<td>1</td>
<td>250</td>
</tr>
<tr>
<td>Ben Rosenberg</td>
<td>5</td>
<td>1250</td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td><strong>18</strong></td>
<td><strong>4500</strong></td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="files">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Files</th>
<th>Forecast</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Estimated Earning</td>
<td>$1.8M</td>
<td>Under Norm</td>
</tr>
<tr>
<td>Future Plan</td>
<td>$12M</td>
<td>2016-2020</td>
</tr>
<tr>
<td>This Year Plan</td>
<td>$0.7M</td>
<td>Under Norm</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="tasks">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Task</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr>
<td>Expand the existing offices</td>
<td>On Progress</td>
</tr>
<tr>
<td>Start working on the new plan</td>
<td>To Do</td>
</tr>
<tr>
<td>Implement Jira</td>
<td>To Do</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="socialmedia">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Name</th>
<th>Nr.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Facebook</td>
<td>2700</td>
</tr>
<tr>
<td>Twitter</td>
<td>3300</td>
</tr>
<tr>
<td>Instagram</td>
<td>2200</td>
</tr>
<tr>
<td>Email Marketing</td>
<td>1000</td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td><strong>9200</strong></td>
</tr>
</tbody>
</table>
</div>
<div class="panel panel-default bootcards-chart cards hidden" id="growth">
<div class="bootcards-chart-canvas" id="growthChart"></div>
</div>
<div class="panel-footer">
<small>Sample Company</small>
</div>
</div>
</div>
</div>
</div>
Example like one in enter link description here
I have a list of Java objects that needs to be displayed in bootsrap cards within div. How can I paginate the bootsrap cards using angular js or any JavaScript
For example in the below example Bootstr i have 6 cards. Now i need to iterate over the list of Java Objects from Spring rest controller and display in cards using pagination .
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-default bootcards-summary">
<div class="panel-heading">
<h3 class="panel-title">Company Management</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#finances" onclick="p('#finances')">
<i class="fa fa-3x fa-dollar"></i>
<h4>Finances <span class="label label-info">431</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#clients" onclick="p('#clients')">
<i class="fa fa-3x fa-users"></i>
<h4>Clients <span class="label label-warning">432</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#files" onclick="p('#files')">
<i class="fa fa-3x fa-files-o"></i>
<h4>Files <span class="label label-info">65</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#tasks" onclick="p('#tasks')">
<i class="fa fa-3x fa-check-square-o"></i>
<h4>Tasks <span class="label label-warning">109</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#socialmedia" onclick="p('#socialmedia')">
<i class="fa fa-3x fa-share-alt"></i>
<h4>Social Media <span class="label label-warning">110</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#growth" onclick="p('#growth')">
<i class="fa fa-3x fa-bar-chart"></i>
<h4>Growth <span class="label label-info">110</span></h4>
</a>
</div>
</div>
</div>
<div class="panel panel-default bootcards-chart cards hidden" id="finances">
<div class="bootcards-chart-canvas" id="financesChart"></div>
</div>
<div class="table-responsive cards hidden" id="clients">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Name</th>
<th>Products</th>
<th>Paid</th>
</tr>
</thead>
<tbody>
<tr>
<td>Johan Millner</td>
<td>2</td>
<td>500</td>
</tr>
<tr>
<td>Jena Torey</td>
<td>3</td>
<td>750</td>
</tr>
<tr>
<td>Jesus Da Silva</td>
<td>7</td>
<td>1750</td>
</tr>
<tr>
<td>Robert Ramsey</td>
<td>1</td>
<td>250</td>
</tr>
<tr>
<td>Ben Rosenberg</td>
<td>5</td>
<td>1250</td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td><strong>18</strong></td>
<td><strong>4500</strong></td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="files">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Files</th>
<th>Forecast</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Estimated Earning</td>
<td>$1.8M</td>
<td>Under Norm</td>
</tr>
<tr>
<td>Future Plan</td>
<td>$12M</td>
<td>2016-2020</td>
</tr>
<tr>
<td>This Year Plan</td>
<td>$0.7M</td>
<td>Under Norm</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="tasks">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Task</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr>
<td>Expand the existing offices</td>
<td>On Progress</td>
</tr>
<tr>
<td>Start working on the new plan</td>
<td>To Do</td>
</tr>
<tr>
<td>Implement Jira</td>
<td>To Do</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="socialmedia">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Name</th>
<th>Nr.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Facebook</td>
<td>2700</td>
</tr>
<tr>
<td>Twitter</td>
<td>3300</td>
</tr>
<tr>
<td>Instagram</td>
<td>2200</td>
</tr>
<tr>
<td>Email Marketing</td>
<td>1000</td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td><strong>9200</strong></td>
</tr>
</tbody>
</table>
</div>
<div class="panel panel-default bootcards-chart cards hidden" id="growth">
<div class="bootcards-chart-canvas" id="growthChart"></div>
</div>
<div class="panel-footer">
<small>Sample Company</small>
</div>
</div>
</div>
</div>
</div>div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-default bootcards-summary">
<div class="panel-heading">
<h3 class="panel-title">Company Management</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#finances" onclick="p('#finances')">
<i class="fa fa-3x fa-dollar"></i>
<h4>Finances <span class="label label-info">431</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#clients" onclick="p('#clients')">
<i class="fa fa-3x fa-users"></i>
<h4>Clients <span class="label label-warning">432</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#files" onclick="p('#files')">
<i class="fa fa-3x fa-files-o"></i>
<h4>Files <span class="label label-info">65</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#tasks" onclick="p('#tasks')">
<i class="fa fa-3x fa-check-square-o"></i>
<h4>Tasks <span class="label label-warning">109</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#socialmedia" onclick="p('#socialmedia')">
<i class="fa fa-3x fa-share-alt"></i>
<h4>Social Media <span class="label label-warning">110</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#growth" onclick="p('#growth')">
<i class="fa fa-3x fa-bar-chart"></i>
<h4>Growth <span class="label label-info">110</span></h4>
</a>
</div>
</div>
</div>
<div class="panel panel-default bootcards-chart cards hidden" id="finances">
<div class="bootcards-chart-canvas" id="financesChart"></div>
</div>
<div class="table-responsive cards hidden" id="clients">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Name</th>
<th>Products</th>
<th>Paid</th>
</tr>
</thead>
<tbody>
<tr>
<td>Johan Millner</td>
<td>2</td>
<td>500</td>
</tr>
<tr>
<td>Jena Torey</td>
<td>3</td>
<td>750</td>
</tr>
<tr>
<td>Jesus Da Silva</td>
<td>7</td>
<td>1750</td>
</tr>
<tr>
<td>Robert Ramsey</td>
<td>1</td>
<td>250</td>
</tr>
<tr>
<td>Ben Rosenberg</td>
<td>5</td>
<td>1250</td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td><strong>18</strong></td>
<td><strong>4500</strong></td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="files">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Files</th>
<th>Forecast</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Estimated Earning</td>
<td>$1.8M</td>
<td>Under Norm</td>
</tr>
<tr>
<td>Future Plan</td>
<td>$12M</td>
<td>2016-2020</td>
</tr>
<tr>
<td>This Year Plan</td>
<td>$0.7M</td>
<td>Under Norm</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="tasks">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Task</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr>
<td>Expand the existing offices</td>
<td>On Progress</td>
</tr>
<tr>
<td>Start working on the new plan</td>
<td>To Do</td>
</tr>
<tr>
<td>Implement Jira</td>
<td>To Do</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="socialmedia">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Name</th>
<th>Nr.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Facebook</td>
<td>2700</td>
</tr>
<tr>
<td>Twitter</td>
<td>3300</td>
</tr>
<tr>
<td>Instagram</td>
<td>2200</td>
</tr>
<tr>
<td>Email Marketing</td>
<td>1000</td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td><strong>9200</strong></td>
</tr>
</tbody>
</table>
</div>
<div class="panel panel-default bootcards-chart cards hidden" id="growth">
<div class="bootcards-chart-canvas" id="growthChart"></div>
</div>
<div class="panel-footer">
<small>Sample Company</small>
</div>
</div>
</div>
</div>
</div>
Example like one in enter link description here
Share edited Jul 17, 2017 at 13:23 TechEnthu asked Jul 15, 2017 at 19:26 TechEnthuTechEnthu 971 gold badge2 silver badges13 bronze badges 7- I can't see said 'Java' object code, and don't you mean Javascript.. Not Java. (Rhetorical) – pokeybit Commented Jul 15, 2017 at 19:30
- What did you tried soo far? – Arpit Svt Commented Jul 15, 2017 at 19:33
- Actually I have a spring rest controller. On view I am getting a list of Java objects.For eg say list of Employees with id and name. I need to display that list of Employee objects in bootstrap cards with pagination in jsp – TechEnthu Commented Jul 15, 2017 at 19:33
- Java is not the same as JavaScript, please if you need to pass values to a view with Java you can do easily with Springframework but if you are working with Javascript try with angularjs. If your want our help edit your post and add your code. Regards. – Ivan Lynch Commented Jul 15, 2017 at 19:35
- So far I am displaying full list of objects in cards in a single page . So need to paginate – TechEnthu Commented Jul 15, 2017 at 19:36
1 Answer
Reset to default 1First you need to declare a controller to get the model that you want to pass to your cards,
@RequestMapping(method=RequestMethod.GET)
public ModelAndView getEmployees(){
return new ModelAndView("HereYouUsersView", "EmployeeListObject", EmployeeListObject);
}
then in your view, you need to iterate over your cards to populate the data like this:
<c:forEach items="${EmployeeListObject}" var="user">
<tr>
<td><c:out value="${user.nombre}"></c:out></td>
<td><c:out value="${user.correo}"></c:out></td>
<td><c:out value="${user.telefono}"></c:out></td>
<td><c:out value="${user.id}"></c:out></td>
</tr>
</c:forEach>
make sure you have at the top of your view:
<%@taglib prefix="c" uri="http://java.sun./jsp/jstl/core" %>
[EDIT]
<div class="pagination">
<c:forEach items="${EmployeeListObject}" var="user" varStatus="loop">
<a href="#${loop.index}">Page ${loop.index}</a>
</c:forEach>
</div>
then in your cards:
<c:forEach items="${EmployeeListObject}" var="user" varStatus="loop">
<div id="${loop.index}" class="card">
//your card data here
<div>
</c:forEach>
[EXAMPLE with JQuery]
<!DOCTYPE html>
<html>
<head>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./font-awesome/4.6.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare./ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/mdbootstrap/4.3.0/js/mdb.min.js"></script>
<link rel="stylesheet" type="text/css" src="https://cdnjs.cloudflare./ajax/libs/mdbootstrap/4.3.0/css/mdb.min.css">
<title>
</title>
</head>
<body>
<!--Pagination red-->
<nav>
<ul class="pagination pg-red">
<!--Numbers-->
<li class="page-item"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
</ul>
</nav>
<!--/Pagination red-->
<hr/>
<h3>Container</h3>
<hr/>
<script type="text/javascript">
$(document).ready(function(){
//Hide all cards
$(".card").each(function(index, value){
$('.card').hide();
})
$(".page-link").on('click', function(){
$(".page-link").each(function(index, value){
$(value).parent().removeClass("active");
});
//Hide all cards
$(".card").each(function(index, value){
$('.card').hide();
})
$(this).parent().addClass("active");
var cardId = "#" + $(this).text();
$(cardId).show();
});
});
</script>
<div class="container">
<!--Card-->
<div id="1" class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap./img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">This is card 1</h4>
<!--Text-->
<p class="card-text">First content</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
<!--Card-->
<div id="2" class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap./img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">This is card 2</h4>
<!--Text-->
<p class="card-text">Second content</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
<!--Card-->
<div id="3" class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap./img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">This is card 3</h4>
<!--Text-->
<p class="card-text">Third content</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
<!--Card-->
<div id="4" class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap./img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">This is card 4</h4>
<!--Text-->
<p class="card-text">Fourth content</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
</body>
</html>Check the snippet, Regards