Infinite scrolling is currently a typical element, and there are a few situations where it is extremely valuable. For example, there are a few sites where we basically can’t envision a decent pagination framework similar to Twitter or even Facebook. Another case of where infinite scrolling can be valuable is for a search motor: you’ll need to keep seeing new links while you don’t locate the one you need, and a pagination framework can back you off in your research. So today, in this article, we will discuss an Amazing and beautiful example of Bootstrap Infinite Scroll with load more using HTML, CSS and Javascript(JS).

Infinite scrolling turns out to be progressively famous nowadays. The purpose for this may be the wide utilization of advanced cells, so we tend to convey our rundown vertically. In the event that it has a not insignificant rundown to show, Infinite scrolling is very user neighborly. The working rule is the point at which we look down progressively. The substance will stack naturally; that is, it replaces the utilization of pagination.

Be that as it may, I am certain that the event that you execute infinite scrolling admirably can improve your user experience, particularly if your site has a colossal rundown of information to appear.

Collection of Bootstrap Infinite Scroll Examples with Code Snippet

If you have to utilize infinite scrolling for your undertaking, here are six demos you can use as motivation to execute it.


Alright! Keeping the contention aside currently, as we’re just going to talk about infinite scrolling here. Beginning from level zero, you can make everything alone, doing all the necessary coding and stuff.

Or on the other hand, you can utilize and execute this on your own projects/websites.

1. Jquery Bootstrap 4 Masonry Infinite Scroll

Bootstrap infinite scroll masonry example

This demo loads in images on an infinite scroll and never arrives at the end. It utilizes the jQuery Endless Scroll module, which can be modified to trigger loading x number of pixels from the base of the screen. All the images are arranged in a Masonry grid layout. The loading animation looks good as well.

The demo clones similar images and embeds them toward the finish of the rundown, etc, yet the content can be redone to load the images from various sources effectively.


2. Infinite Scroll with Scrollspy

Bootstrap infinite scroll example with scrollspy

This is another example of Infinite Scroll. As the name refers, this uses the ScrollSpy plugin. The Scrollspy plugin is utilized to automatically update links in a navigation list dependent on the scroll position. As you scroll down, you can also see a loading animation and the content appears again and again.

As this is a demo version, so the designer has given only sample content. So you need to replace them with your own content before implementing them into your website design.


Bootstrap infinite scroll example lazy loading gallery

If you want to try out Infinite Scroll for your gallery layout, then you can make use of this design. At the top left is a hamburger menu icon that is not functional yet. But you can modify the design later accordingly.

You can also convey these on any page within your website to incredible impact. So astonish your crowd and keep them interested and connected as they scrutinize your blog entries or innovative portfolio features.


4. Infinite Scroll List Example

Bootstrap infinite scroll list example

Another example of Bootstrap Infinite Scroll is to load more while we go down the list. Unlike the previous design that was for the gallery, this one focuses more on the list.

There are a number of lists that goes on and on. As you scroll down, more of the list appears down. I tried dragging the scroll bar. I could not reach the end. Try it out!

The designer has used HTML and Jquery to accomplish this design.


5. Simple Infinite Scroll Example

Bootstrap simple infinite scroll example

This is somewhat similar to the previous design. This is a simple infinite scroll example using Vue.js. The design focuses on a number of items.

So in this Bootstrap infinite scroll example, as you scroll down to reach the end, a simple loading animation appears, and again the list loads up more and more.

Fading animation is used to show that the page is loading. Also, if you need more inspiration for a loading animation, have a look at this CSS Loader Example.


6. Infinite Scroll App Example

infinite scroll app example

You may not have listened to infinite scroller previously; however, you may utilize it when you are a client of Facebook, Twitter and Instagram. An infinite scroller is more modern in utilizing than pagination.

Instead of waiting for the client to press ‘ next page, ‘ fresh material will be stacked automatically every time the client arrives at the bottom of the page. In this manner, there is a perpetual supply of material to be perused by the client.


7. jQuery Mobile Infinite Scroll

jquery mobile scroll

Yet another example of Infinite Scroll. We cannot exactly call it an infinite scroll because we are limited to a certain value here. As seen, there are two boxes at the top left and right of the page.

The right box indicates ScrollEnd, meaning the user can only scroll up to that value. The value is 3885. You can only scroll to that specific value, and then you are restricted to scrolling onward.


8. Infinite Animation Scroll React and CSS3

infinite animation react css3

Using React infinite scroll is an incredible design. Why not you attempt this with CSS3 too? Keeping in mind, using both of them will be the best design ever, is it or not? You may think it is troublesome to do errands using React and CSS. No, it isn’t so much that much dubious has a superior look. Definitely, you’ll design it.

Infinite scroll is the idea of loading crisp material while scrolling down a website. Additionally, an animated piece of it assists with building your website progressively appealing.


9. Infinite Scrolling Throttled Code Snippet

scrolling throttled cde snippet

This one is another example of Infinite Scroll. In the design, the designer has given you only blocks with no content in them. There are tons of blocks that appear more and more as you scroll down. The border color for each of the blocks is different, and this looks pretty beautiful and blends well with the design.


10. Bootstrap Infinite Scroll JS Demo with Source Code

scroll demo with source code

If you have gone through our previous timeline examples, then you can surely relate to this design. Both texts and images are used in the design. This one uses an alternate structure to showcase the contents. As you scroll down, more of the content appears with a sliding animation.


11. Infinite Scroll Masonry Image Grid

Infinite Masonry Image Grid

Here, the designer has made use of the Masonry format. If you have a gallery website, you can use this design. So talking about the main thing, this supports infinite scroll impact. So as you scroll down, you can see more blocks appearing one by one.

As this is a demo version, some of these blocks have images in them, and some of them just have colorful shades. So you need to modify the design properly before you implement it into your web-based projects.


12. Responsive Masonry Infinite Scroll Effect

Responsive Masonry scrolll Effect

Infinite responsive grid (Masonry/Isotope) and uncover items with animation on scroll (using Animate.css).

Things can be filtered as well (isotope). If you have many items to show and want to categorize them accordingly, then you can use this type of design. This will also make your page look cleaner and neater.


13. Bootstrap Pure JS Infinite Scroll

Pure JS Infinite

This one is a very simple example of Bootstrap Infinite scroll. There is a list of items inside a small box-like structure. There is a scroll bar as well. You can use the scroll bar or your mouse wheel to scroll down the items.

As you scroll down further, more items load up. Hover impact is also properly utilized to let the user know which one is being highlighted,


14. Infinite Scrolling

Infinite Scrolling

In the last example of Bootstrap infinite scroll, as you scroll down and reach to the end, you get a button that says ‘Load More.’ So as you click on it, more of the items show up before and After pseudo elements utilize for styling purpose.



Considering everything, the Infinite scroll is the thought of stacking new material as you look down a site for anybody new. The site naturally stacks crisp material and adds it to the base when you get to the base of the material.

We’ve taken a gander at 14 distinct examples of Bootstrap infinite scroll to load more on scroll using HTML, CSS and JavaScript/JS. Regardless of what you’re attempting to construct, you ought to have the option to utilize one of these systems to accomplish the outcome you need.

As usual, we’d love to hear your thoughts: have you fabricated anything cool with one of these modules or procedures? Do you have a most loved module that you think should have been referenced? Tell us in the remarks!

Pin It on Pinterest