Streaming live at 10am (PST)

Pagination for a dynamic list

a workaround could be using dynamic filters.

  1. create a static page
  2. drag in a dynamic list to that page
  3. set the filter to show only X amount of items
  4. set a range of items to load

rinse and repeat for other pages

Related threads:

Manual pagination with 100 items is feasible, but pagination with 2000 items is impossible.

If I put 30 items per page, I will have to create more than 65 statistical pages. The goal of Webflow is to save time and not lose …


You’re not the first one who has this thought.

1 Like

I’ve come up with a solution that doesn’t completely solve your problem, but may be helpful to some other users. It doesn’t help with page load times if you have a ton of posts (like OP’s 2000), but if you have a reasonable number it could still be helpful.

The idea is to hide all posts at first, and use JavaScript to hide and show the posts based on a custom page size. I used the jQuery bootpag plugin ( to create the pager, and took just the pagination classes from Bootstrap’s CSS so I didn’t have to include the whole library.

Working example at


Add a div element to the page where you want your pager to be. Give it a class (mine is called “blog-pager”).


Copy this into the Custom Code section of your Page Settings, in the “Inside tag” box. You can leave out everything below the /* Bootstrap pagination classes isolated */ comment if you’re already using Bootstrap on your site. I added the class “blog-list” to my dynamic type. You’ll have to do the same and change this CSS to match whatever class you give it.

<style type="text/css">
.blog-list {
    display: none;

/* Bootstrap pagination classes isolated */

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;

.pagination > li {
    display: inline;

.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #337ab7;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    margin-left: -1px;

.pagination > li:first-child > a,
.pagination > li:first-child > span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;

.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    z-index: 2;
    color: #23527c;
    background-color: #eeeeee;
    border-color: #dddddd;

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    z-index: 3;
    color: #ffffff;
    background-color: #337ab7;
    border-color: #337ab7;
    cursor: default;

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    color: #777777;
    background-color: #ffffff;
    border-color: #dddddd;
    cursor: not-allowed;

.pagination-lg > li > a,
.pagination-lg > li > span {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;

.pagination-sm > li > a,
.pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;

The Javascript

You can put this in the “Before tag” box in the page settings. Change pageSize to how many posts you want to show per page. You’ll also have to change “blog-list” and “blog-pager” to your own classes. At time of writing, the bootpag plugin is available on

<script type="text/javascript" src=""></script>
<script type="text/javascript">
    $(document).ready(function() {
        // set page size
        var pageSize = 5;
        // show first [pageSize] posts
        $(".blog-list").slice(0, pageSize).fadeIn();
        // get total count of posts
        var blogCount = $('.blog-list').length;
        // initialize pager
            total: Math.ceil(blogCount / pageSize),
            page: 1,
            maxVisible: 10,
            leaps: true,
        //page click action
        $('.blog-pager').on("page", function(event, num) {
            $('.blog-list').slice(num * pageSize - pageSize, num * pageSize).show();

And that should do it! Obviously not ideal, and doesn’t address the deeper issue of not having true pagination, but hopefully will help someone out there.


I’ve been having to move clients to Wordpress for this exact reason. Webflow is not the ideal platform for clients with massive, constantly updating blogs without a pagination feature.

I would really, really love to use Webflow for all of my web projects, but this is currently a major limitation.


When it can be available its almost one year over?

For those of you watching at home: we are very, very close to a release here. I’ve been playing with pagination all week - and it’s sweet. Thank you all sincerely for your patience :pray:


B R U H :star_struck:

1 Like

oh hype!!

Super excited for this feature, no more hacking it together :raised_hands:


Can we paginate on individual collection pages?


Not sure what you mean by your question?

Are you referring to a list of blog posts that you dont want to see more than say 12 collective posts?

Or are you referring to something else?

@WebDev_Brandon Sorry for the confusion.

So as shown in the image below, on top right it says 20 of 25 with option to view either the previous or the next product. This is displayed on the product page.

Can we do the same in webflow?

@RohanGanachari, at the moment I do not believe so.

@WebDev_Brandon That’s unfortunate. It would have been a neat feature for blog page and/or product pages.

1 Like

@RohanGanachari, not sure if you have seen, but page count is now available for pagination feature for blogs and other CMS collection items.

1 Like

@WebDev_Brandon Thank you for letting me know. I’ll check it out! :slight_smile:

@WebDev_Brandon Just to confirm, is this what you meant?

1 Like

Yes that is one of them. @PixelGeek Also created a Webflow tut for this as well.

1 Like

Awesome Job! The current webflow pagination doesn’t provide the number(s) of pages. Your method does provide it :+1: AND its dynamic with the cms!