create a attractive element listing design using html , bootstrap and css . and i have include one more thing , lode more functionality with the help of jquery .
<!DOCTYPE html>
<html lang="en">
<head>
<title>List element design using bootstrap and css | Jswebsolutions.in | Live Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="http://jswebsolutions.in/public/uploadsFiles/favicon_icon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="../assets/css/site.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-sm-offset-2 col-sm-6">
<ul class="loadMore list-group">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript::void()" name="load_more" id="load_more" class="btn btn-warning">Load More</a>
</div>
</div>
</div>
</body>
</html>
.loadMore{ list-style-type:none; }
.loadMore li{ display:none; padding:10px; background-color:#093; border-bottom:#039 1px solid; border-radius:5px; margin-bottom:3px;; }
.loadMore li::before{ content:"Load More Content"; color:#FFF; font-weight:600; }
$(document).ready(function(e) {
var limit = 5;
$(".loadMore li").slice(0, limit).show();
$(document).on('click','#load_more',function(e){
limit += 5;
e.preventDefault();
$(".loadMore li").slice(0, limit).show();
});
//var lenght_name = $(".loadMore li").length;
});