Bootstrap Editor use requires a larger screen resolution. Resize your browser, or use a device with a larger screen (desktop or laptop). You can preview at smaller widths (phone / tablet), but the editing capability is disabled.

Switch to render view

javascript

/* pagination */
$.fn.pageMe = function(opts){
    var $this = this,
        defaults = {
            perPage: 7,
            showPrevNext: false,
            numbersPerPage: 1,
            hidePageNumbers: false
        },
        settings = $.extend(defaults, opts);
    
    var listElement = $this;
    var perPage = settings.perPage; 
    var children = listElement.children();
    var pager = $('.pagination');
    
    if (typeof settings.childSelector!="undefined") {
        children = listElement.find(settings.childSelector);
    }
    
    if (typeof settings.pagerSelector!="undefined") {
        pager = $(settings.pagerSelector);
    }
    
    var numItems = children.size();
    var numPages = Math.ceil(numItems/perPage);

pager.data("curr",0);
    
    if (settings.showPrevNext){
        $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
    }
    
    var curr = 0;
    while(numPages > curr && (settings.hidePageNumbers==false)){
        $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);
        curr++;
    }
  
    if (settings.numbersPerPage>1) {
       $('.page_link').hide();
       $('.page_link').slice(pager.data("curr"), settings.numbersPerPage).show();
    }
    
    if (settings.showPrevNext){
        $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
    }
    
    pager.find('.page_link:first').addClass('active');
    if (numPages<=1) {
        pager.find('.next_link').hide();
    }
  	pager.children().eq(1).addClass("active");
    
    children.hide();
    children.slice(0, perPage).show();
    
    pager.find('li .page_link').click(function(){
        var clickedPage = $(this).html().valueOf()-1;
        goTo(clickedPage,perPage);
        return false;
    });
    pager.find('li .prev_link').click(function(){
        previous();
        return false;
    });
    pager.find('li .next_link').click(function(){
        next();
        return false;
    });
    
    function previous(){
        var goToPage = parseInt(pager.data("curr")) - 1;
        goTo(goToPage);
    }
     
    function next(){
        goToPage = parseInt(pager.data("curr")) + 1;
        goTo(goToPage);
    }
    
    function goTo(page){
        var startAt = page * perPage,
            endOn = startAt + perPage;
        
        children.css('display','none').slice(startAt, endOn).show();
        
        if (page>=1) {
            pager.find('.prev_link').show();
        }
        else {
            pager.find('.prev_link').hide();
        }
        
        if (page<(numPages-1)) {
            pager.find('.next_link').show();
        }
        else {
            pager.find('.next_link').hide();
        }
        
        pager.data("curr",page);
       
        if (settings.numbersPerPage>1) {
       		$('.page_link').hide();
       		$('.page_link').slice(page, settings.numbersPerPage+page).show();
    	}
      
      	pager.children().removeClass("active");
        pager.children().eq(page+1).addClass("active");  
    }
};

$('#items').pageMe({pagerSelector:'#myPager',childSelector:'tr',showPrevNext:true,hidePageNumbers:false,perPage:5});
/****/

css

html

container

row

8.3%

12.5%

25%

33%

41.6%

50%

58.3%

66%

75%

83.3%

91.6%

100%

Hero

well

<form>

h1

h2

h3

h4

small

icon

table

<hr>

label

badge

[media]

"Lorem ipsum.."

User Profile Page for Bootstrap 3 Template for a user settings, stats or profile page. This example has a tabbed layout, table with pagination, and various user stats panels.
0	1414 Bootstrap v3.1.1 Related snippets
user profile template users dashboard snippet inbox
Created by: webofink

War	Type	Status
Custom War vs. Guitarist101	Guitar	In Progress
Melee vs. Ender	Guitar	Completed
Melee vs. Ender	Guitar	Completed
Showcase	Song	Completed
Showcase	Song	Completed
Showcase	Song	Completed
Showcase	Song	Completed
Showcase	Song	Completed

Bootply

User Profile Page for Bootstrap 3

Template for a user settings, stats or profile page. This example has a tabbed layout, table with pagination, and various user stats panels.

Bootply v1.2.1
An unofficial Bootstrap playground.

Fork on GitHub | Contact

h1

h2

h3

h4

Sheikmagnet

Recent Activity

First name

Last name

Phone

Mobile

Email

Location

Password

Verify

id
style
class

Bootply

User Profile Page for Bootstrap 3

Template for a user settings, stats or profile page. This example has a tabbed layout, table with pagination, and various user stats panels.

Bootply v1.2.1 An unofficial Bootstrap playground.

Fork on GitHub | Contact

h1

h2

h3

h4

Starter Template

Details

Sheikmagnet

Recent Activity

First name

Last name

Phone

Mobile

Email

Location

Password

Verify

Do you want to proceed?

Password Lookup

Would you like to upgrade?

$9/mo

Contact Us

Bootply v1.2.1
An unofficial Bootstrap playground.