Ajouter une pagination1

<!DOCTYPE html>
<html>
<head>
   <title>Ajouter la pagination à votre site Web | Par MEZGANI SAID</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="keyword" content="Ajouter multiple input dynamique">
   <meta name="author" content="Mezgani said">
   <meta name="copyright" content="NGLESSON">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" type="text/css">    	
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
   <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body class="container">
	<div class="row">
	    <div class="col-lg-8">
         <div class="container2">
            <div class="jumbotron page" id="page1">
               <div class="container">
                  <h1 class="display-3">Adding Pagination to your Website</h1><br>
                  <p class="lead">In this article we teach you how to add pagination, an excellent way to navigate large amounts of content, to your website using a jQuery Bootstrap Plugin.</p><br>
                  <p><a class="btn btn-lg btn-success" href="#" role="button">Learn More</a></p>
               </div>
            </div>
            <div class="jumbotron page" id="page2">
               <h1 class="display-3">Not Another Jumbotron</h1>
               <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
               <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
            </div>
            <div class="jumbotron page" id="page3">
               <h1 class="display-3">Data. Data. Data.</h1>
               <p>This example is a quick exercise to illustrate how the default responsive navbar works. It's placed within a <code>.container</code> to limit its width and will scroll with the rest of the page's content.</p>
               <p>
                  <a class="btn btn-lg btn-primary" href="" role="button">View navbar docs »</a>
               </p>
            </div>
            <div class="jumbotron page" id="page4">
               <h1 style="-webkit-user-select: auto;">Buy Now!</h1>
               <p class="lead" style="-webkit-user-select: auto;">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
               <p style="-webkit-user-select: auto;"><a class="btn btn-lg btn-success" href="#" role="button" style="-webkit-user-select: auto;">Get started today</a></p>
            </div>
            <div class="jumbotron page" id="page5">
               <h1 class="cover-heading">Cover your page.</h1>
               <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
               <p class="lead">
                  <a href="#" class="btn btn-lg btn-primary">Learn more</a>
               </p>
            </div>
            <ul id="pagination-demo" class="pagination-lg pull-right">
               
            </ul>
         </div>			
		</div>
	</div>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script type="text/javascript" src="https://www.solodev.com/assets/pagination/jquery.twbsPagination.js"></script>
   <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="script.js"></script>	
</body>
</html>
.container2 {
  margin-top: 20px;
}
.page {
  display: none;
}
.page-active {
  display: block;
}
$(document).ready(function() {
    $('#pagination-demo').twbsPagination({
        totalPages: 5,
        // the current page that show on start
        startPage: 1,
        // maximum visible pages
        visiblePages: 5,
        initiateStartPageClick: true,
        // template for pagination links
        href: false,
        // variable name in href template for page number
        hrefVariable: '{{number}}',
        // Text labels
        first: 'First',
        prev: 'Previous',
        next: 'Next',
        last: 'Last',
        // carousel-style pagination
        loop: false,
        // callback function
        onPageClick: function (event, page) {
        $('.page-active').removeClass('page-active');
        $('#page'+page).addClass('page-active');
        },
        // pagination Classes
        paginationClass: 'pagination',
        nextClass: 'next',
        prevClass: 'prev',
        lastClass: 'last',
        firstClass: 'first',
        pageClass: 'page',
        activeClass: 'active',
        disabledClass: 'disabled'
    });
});
toggle switch style03

toggle switch style03

input radio checkbox b4 style

input radio checkbox b4 style

Transitions Animations SVG Style01

Transitions Animations SVG Style01

Timeline style07

Timeline style07

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Image hover 02

Image hover 02

Drag and drop or upload input file

Drag and drop or upload input file

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Card Bootstrap4 01

Card Bootstrap4 01

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select