Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by csornmo

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="content">
	<div class="item">Item 1</div>
	<div class="item">Item 2</div>
	<div class="item">Item 3</div>
	<div class="item">Item 4</div>
	<div class="item">Item 5</div>
	<div class="item">Item 6</div>
	<div class="item">Item 7</div>
	<div class="item">Item 8</div>
	<div class="item">Item 9</div>
	<div class="item">Item 10</div>
	<div class="item">Item 11</div>
	<div class="item">Item 12</div>
	<div class="item">Item 13</div>
	<div class="item">Item 14</div>
	<div class="item">Item 15</div>
	<div class="item">Item 16</div>
	<div class="item">Item 17</div>
	<div class="item">Item 18</div>
	<div class="item">Item 19</div>
    <div class="item">Item 20</div>
	<div class="item">Item 21</div>
	<div class="item">Item 12</div>
	<div class="item">Item 13</div>
	<div class="item">Item 14</div>
	<div class="item">Item 15</div>
	<div class="item">Item 16</div>
	<div class="item">Item 17</div>
	<div class="item">Item 18</div>
	<div class="item">Item 19</div>
    <div class="item">Item 20</div>
	<div class="item">Item 21</div>
</div>
<div class="container">
    <ul id="paging" class="pagination-sm"></ul>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.item {
    display: none;
}
.item.active {
    display: block;   
}

JavaScript

window.jQuery(function(){
    var $content = $('.content');
    var $childs = $content.children();
    var items_per_page = 5;
    function hide_all() {
        $childs.removeClass('active');   
    }
    function show_page(num, items_per_page) {
        hide_all();
        $childs.slice((num-1)*items_per_page, num*items_per_page).addClass('active');
    }
    $('#paging').twbsPagination({
        totalPages: Math.ceil($childs.length/items_per_page),
        visiblePages: 5,
        onPageClick: function (event, page) {
            show_page(page, items_per_page);
        }
    });
});


/*
 * jQuery Bootstrap Pagination v1.2.6
 * https://github.com/esimakin/twbs-pagination
 *
 * Copyright 2014-2015 Eugene Simakin <[email protected]>
 * Released under Apache 2.0 license
 * http://apache.org/licenses/LICENSE-2.0.html
 */
!function(a,b,c,d){"use strict";var e=a.fn.twbsPagination,f=function(c,d){if(this.$element=a(c),this.options=a.extend({},a.fn.twbsPagination.defaults,d),this.options.startPage<1||this.options.startPage>this.options.totalPages)throw new Error("Start page option is incorrect");if(this.options.totalPages=parseInt(this.options.totalPages),isNaN(this.options.totalPages))throw new Error("Total pages option is not correct!");if(this.options.visiblePages=parseInt(this.options.visiblePages),isNaN(this.options.visiblePages))throw new Error("Visible pages option is not correct!");if(this.options.totalPages<this.options.visiblePages&&(this.options.visiblePages=this.options.totalPages),this.options.onPageClick instanceof Function&&this.$element.first().on("page",this.options.onPageClick),this.options.href){var e,f=this.options.href.replace(/[-\/\\^$*+?.|[\]]/g,"\\$&");f=f.replace(this.options.hrefVariable,"(\\d+)"),null!=(e=new RegExp(f,"i").exec(b.location.href))&&(this.options.startPage=parseInt(e[1],10))}var g="function"==typeof...