NiceSnippets.com
Simple Bootstrap 4 Pagination Design
This is simple bootstrap 4 different types of view pagination design. you can use this pagination design in php,laravel,codeigniter,java and many other language. this pagination design create usign html,css and bootstrp 4. bootstrap dynamic pagination example
We allows to free snippets of bootstrap pagination example , you can download full code of bootstrap dynamic pagination example layout. Here in this post i will give you example of bootstrap pagination next previous snippet and you will get simple code of html, css and jquery. In bootstrap pagination table snippet i give you three tab with html, css and js, you can easily get code of bootstrap pagination jquery layout.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div class="container main-section">
<div class="row">
<div class="offset-sm-3 col-lg-4 col-sm-6 col-12 section">
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#"><i class="fa fa-arrow-right" aria-hidden="true"></i></a>
</li>
</ul>
</nav>
</div>
</div>
<div class="row">
<div class="offset-sm-3 col-lg-4 col-sm-6 col-12 section">
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="row">
<div class="offset-sm-3 col-lg-4 col-sm-6 col-12 section">
<nav aria-label="...">
<ul class="pagination pagination-xs">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="row">
<div class="offset-sm-3 col-lg-4 col-sm-6 col-8 section">
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
.main-section{
margin-top:100px;
}
.section{
margin-top:30px;
}
