NiceSnippets.com
User Listing Page Design Usign Bootstrap 4
We are giving you best listing page design snippet using html,css and bootstrap 4. Using this listing card design you can display product,users,image gallery, news listing, record, songs, picture, movies, music, order and other. this is fully responsive admin panel index listing page desing. professional listing design in html and css.
you can get code of bootstrap user list template snippet. we give you example of bootstrap list group horizontal , you can simple copy bellow code and use in your project. If it free snippets of Using this listing card design you can display product,users,image gallery, news listing, record, songs, picture, movies, music, order. So you have to simple get those bellow code from tab of html, css and js. you simple click on HTML Code then you will get html code bootstrap ordered list snippets, click on JS Code tab get code of jquery codd for bootstrap list with images snippets, same as for CSS Code tab. It's pretty easy and simple example of bootstrap product list example snippet.
<!doctype html>
<html lang="en">
<head>
<title>User List | Bootstrap 4</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col-md-2 col-8 offset-2 offset-md-1 profile-box border p-1 rounded text-center mr-5 mb-2 bg-light">
<img src="//nicesnippets.com/demo/profile-1.jpg" class="w-100 mb-1">
<h5 class="m-0"><strong>Bryn Harris</strong></h5>
<p class="mb-2">Web Developer</p>
<button class="btn btn-info btn-sm">EDIT</button>
<button class="btn btn-primary btn-sm">VIEW</button>
<button class="btn btn-danger btn-sm">DELETE</button>
</div>
<div class="col-md-2 col-8 offset-2 offset-md-0 profile-box border p-1 rounded text-center mr-5 mb-2 bg-light">
<img src="//nicesnippets.com/demo/profile-2.png" class="w-100 mb-1">
<h5 class="m-0"><strong>Michael Alex</strong></h5>
<p class="mb-2">Seo Analyst</p>
<button class="btn btn-info btn-sm">EDIT</button>
<button class="btn btn-primary btn-sm">VIEW</button>
<button class="btn btn-danger btn-sm">DELETE</button>
</div>
<div class="col-md-2 col-8 offset-2 offset-md-0 profile-box border p-1 rounded text-center mr-5 bg-light mb-2">
<img src="//nicesnippets.com/demo/profile-3.jpg" class="w-100 mb-1">
<h5 class="m-0"><strong>Mathew Viden</strong></h5>
<p class="mb-2">Project Manager</p>
<button class="btn btn-info btn-sm">EDIT</button>
<button class="btn btn-primary btn-sm">VIEW</button>
<button class="btn btn-danger btn-sm">DELETE</button>
</div>
<div class="col-md-2 col-8 offset-2 offset-md-0 profile-box border p-1 rounded text-center bg-light">
<img src="//nicesnippets.com/demo/profile-5.jpg" class="w-100 mb-1">
<h5 class="m-0"><strong>Simon Mell</strong></h5>
<p class="mb-2">Web Designer</p>
<button class="btn btn-info btn-sm">EDIT</button>
<button class="btn btn-primary btn-sm">VIEW</button>
<button class="btn btn-danger btn-sm">DELETE</button>
</div>
</div>
<div class="row mt-5">
<div class="col-md-2 col-8 offset-2 offset-md-1 profile-box border p-1 rounded text-center mr-5 mb-2 bg-light">
<img src="//nicesnippets.com/demo/profile-6.png" class="w-100 mb-1">
<h5 class="m-0"><strong>Alex Finn</strong></h5>
<p class="mb-2">BD Manager</p>
<button class="btn btn-info btn-sm">EDIT</button>
<button class="btn btn-primary btn-sm">VIEW</button>
<button class="btn btn-danger btn-sm">DELETE</button>
</div>
<div class="col-md-2 col-8 offset-2 offset-md-0 profile-box border p-1 rounded text-center mr-5 bg-light mb-2">
<img src="//nicesnippets.com/demo/profile-7.jpg" class="w-100 mb-1">
<h5 class="m-0"><strong>Dmitri Zen</strong></h5>
<p class="mb-2">Analytics</p>
<button class="btn btn-info btn-sm">EDIT</button>
<button class="btn btn-primary btn-sm">VIEW</button>
<button class="btn btn-danger btn-sm">DELETE</button>
</div>
<div class="col-md-2 col-8 offset-2 offset-md-0 profile-box border p-1 rounded text-center mr-5 bg-light mb-2">
<img src="//nicesnippets.com/demo/profile-8.jpg" class="w-100 mb-1">
<h5 class="m-0"><strong>Jean Benjamin</strong></h5>
<p class="mb-2">Logo Designer</p>
<button class="btn btn-info btn-sm">EDIT</button>
<button class="btn btn-primary btn-sm">VIEW</button>
<button class="btn btn-danger btn-sm">DELETE</button>
</div>
<div class="col-md-2 col-8 offset-2 offset-md-0 profile-box border p-1 rounded text-center bg-light mb-2">
<img src="//nicesnippets.com/demo/profile-9.jpg" class="w-100 mb-1">
<h5 class="m-0"><strong>Ohio Linn</strong></h5>
<p class="mb-2">Entrepreneur</p>
<button class="btn btn-info btn-sm">EDIT</button>
<button class="btn btn-primary btn-sm">VIEW</button>
<button class="btn btn-danger btn-sm">DELETE</button>
</div>
</div>
</div>
</body>
</html>
body{
font-family: 'Ropa Sans', sans-serif;
background: #e1e1e1;
}
.profile-box img{
height: 180px;
}
.profile-box button{
font-size: 12px;
}
.profile-box p{
font-size: 13px;
line-height: 1;
}
