Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework

Bootsnipp is an element gallery for web designers and web developers, anybody using Bootstrap will find this website essential in their craft.

Free Sign upLearn More
  • Latest
  • Featured
For the website loaded with animations, here is an example of pagination where each link is fully loaded with animation. The HTML is similar to any page navigation, except for the animation seen below the page links and previous, next links. The pagination component of bootstrap is used to create a wrapper for the page-links and page-items. The page-link is set with exact spacing and transition property. The clicking and hovering on links set the clip-path to assign a complex shape by clipping an element to a basic shape to the polygon. The transition set enables the smoothness in the effect. The hovering on previous and next also sets the transform property to rotate for 1 complete turn. This can be easily integrated on any website. This is one of the most eye-catching snippets.
This is the best example for the stylish yet simple and neat looking pagination design. This design gives an elegant look due to the circular shapes designed for page links and yet is stylish due to the animation effect assigned while clicking or hovering on the page links. The markup of HTML is simple with the pagination class of Bootstrap wrapping the links and lists of the pagination. The animation effect is based purely on CSS. The pagination is styled with border-radius which gives a unique structure for all the pagination links. The circular shape of the page-link creates a shadowed button, when active or hovered. Along with it, a gradient is set along with the circular shape. This is set by using:: before selector for page-link. The animation effect for previous and next links are the same as all other links. The bold and stylish look can be integrated into any website.
Nowadays the website rarely has only one page displayed. With multiple pages to display it is necessary to have pagination either on top or bottom. This one example is an eye-catcher design of pagination. With its perfect links placed on the pagination component of the Bootstrap, this gives a unique look when the hover event is activated. The classes are well-styled using CSS and animation is handled by the selectors effectively. The page-link is well designed to fit in the pagination wrapper. Once you select or click on any page-link, the selector: before plays a role to set the border with 25px and transform property sets the rotation 360 degrees. A style for first and last child is set with light-height 45px and border-radius to give the unique structure at the beginning and end of the pagination.
This is one with the geometrical figures playing a major role in the designing and animation of this pagination. This gives an ability to move easily along with the page links around your pages. The page range can be increased with the javascripts or by adding elements in HTML markup. To create this animation the CSS selectors play the major role. The pagination component of bootstrap along with the other component is the style for the effect. The page-link is style in such a way that once it hovers it displays a rectangular box for the hovered and active pages. Along with it the font color is changed and is taken care of in the script. The effects are the same for the previous and next elements. Check out the calculations done for the effect. This can be used with any website as the code can be added with ease.
This is a simple animation effect, with a well-designed CSS the snippet takes care of the animation which is an attention grabbing pagination design. HTML mark uses the Bootstrap pagination along with the classes for the list. The page-link is well placed using the CSS style sheet. The pagination class is displayed as inline-flex and set to a relative position whereas the page-links are styled to display the circle instead of normal square or rectangle. The transition set to page-links makes an easy to transit from one link to another. Next, styles take care of selectors like ::hover, ::before and :: after, these selectors are carefully designed to give the animation effect of the eclipse. Along with this effect the font color changes accordingly with the transition of 0.5 sec. Due to its simple code, you can use it with any website.
This pagination CSS design can be used for all types of websites. The spherical page-links are thoughtfully managed with spaces and the buttons looks gives a better user experience. Based on the selection the animation sets its place with a beautiful dot on the top of the page numbers. Clicking it would make the page active with the dot placed over the number turning the spherical shape into a drop. The transition of the page is taken care of with an easily manageable page list. The dot for first and last child seems to be placed along the direction of the arrows. The selectors play an important role in creating animations. Along with this, you can try changing the color of the spherical buttons on hovering. Along with hovering you can change the size of the active link using transform and scale properties.
In modern websites the geometrical designs are widely used, to create uniquely looking pages. These shapes give you a refreshing look with a bit of animation on it. The shadow effect with the gradient enhances the beauty of this design. The Bootstrap pagination wrappers the page-links and page-items with aria-label for previous and next buttons. With this simple markup, all the animation and styling is done using CSS. The CSS sets the styles for each class of pagination. The pagination wrapper sets the linear gradient for this look with the font and display set as inline-flex. The page-link sets the transition property and polygon path using ::after selector. The styling properties need to be designed carefully to get these animations. You can add these kinds of designs for your pagination which is effective in engaging the users who are is bold enough to display the active page.
With bolder and flashy web pages you require a similar but matching pagination. This is a snippet with boxy elements and page-links showing clearly each page and numbers as buttons. The depth effect given to these links gives a realistic effect of pressing the buttons. Looks good on any site and active and hovered elements can be easily identified due to its bright color. HTML markup is easy with the use of Bootstrap pagination. The font used is “Happy Monkey” which gives an antique look to this design. The CSS styling for all the links is the same, unlike other pagination designs. The selectors like::hover set the active page-link by setting the color, margin and background link. The transform sets the decreased size by setting the scale property by 0.8. For the boxy look, the radius is set to zero a transition is set for a few seconds while we sift from one link to another.
With the hourglass displayed for active page, this pagination is uniquely designed to display the pagination for your webpage. With the Bootstrap and pagination components used its display, the Robot font promptly displays the page numbers with previous and next pagination links. The CSS selectors like, ::after, ::before and ::hover play a major role in the animation of page-links. The ::before selector for page-link displays the polygon while the page-link hovers, where are the hovering sets the opacity to 1 and sets the scale() method to set the size of element active or hovered element. The first and last child, that is previous and next links are styled to match the styling of other pagination links. Check out the linear-gradient set to the background of the links. This design can be easily added to any web application.
A pagination is an ordinal number of pages located at the bottom of the pages. But this snippet can be used for the pagination or navigation which is located at the top of the page. This is designed in such a way that it can engage the users with its animation. The HTML markup is simple using a pagination component of Bootstrap and font of Roboto. The Pagination component of Bootstrap wrappers the page-item and page-links with aria-label for next and previous items. The animation is taken care of by CSS selectors. The selectors ::first-child and ::last-child signifies the previous and next element which has the same type of styling with respect to the color font and mouse hovering. The elements apart from the first and last elements have a certain type of animation once they are hovered or active. The transform properties and translate properties create the magic of the animation for the elements.
This is an example of pagination with animation, with its unique design it can easily blend with any of the websites. With the Bootstrap pagination component and with the font “Cabin” the snippet uses the page-item, and page-link wrapped. The HTML markup is simple but the style is obtained from CSS, where the pagination is set as inline-flex where flex container display inline. Page-link sets the links for each page-item and is normally styled for :before and :after hovering. This CSS styles the active hovered and previous and next page-links in the same way. Once you click on a page-link or hover over it, the size seems to be transformed. Also, check out the transition property set while we move from one link to another. For the pagination to work on webpages, you need to add AJAX or java scripts. This can be conveniently and easily used on any website.
This style is uniquely designed and can be used for blogs having a sporty look. It uses Bootstrap 3.3 with the font “ZCOOL QingKe HuangYou”, giving a technical look to the pagination. The HTML markup is simple with the Bootstrap pagination using the page navigation and its component to wrap the page-items. Each page-items contain the links for the previous, next to or the pages which need to be displayed wrapping the page-links. These page links are styled to display the “orangered” background, with a radius giving it a circular shape. Once you hover the mouse you get a triangular shape object pointing out the hovered page-link. Also, the page-item is changed to the transparent circle. The snippet also displays the active page 2, the style for hovering of mouse and active page-item is kept same, the text style is changed when you hover or make a page-item as active.

Subscribe for our newsletter