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
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.
This is a style you would like to have for your stylish sites or blogs. The pagination example goes well with any font but the font used is “Sniglet”. The font, CSS styling, and shadows are a perfect match for this snippet. This uses bootstrap 3.3 for the HTML markup to appear perfectly. Bootstrap pagination is used here which indicates the series of related content across multiple pages and enables the navigation across the pages. Here the large blocks of connected links are used for pagination, which makes it hard to miss the pages and it is easily scalable. You can use the scripts to increase the page numbers. Page-time is added to each element and a .page-link class to each link inside. The active class is used to highlight the active page. The aria-label attribute defines the string that labels the current element. The hovering for links is taken care of by CSS styling which matches the snippet perfectly.
This is another template of a page navigation button line, designed with HTML and CSS. The square-shaped buttons are set to get highlighted in red color, in a focus event. The Li element of lists has been used to display the buttons in a list. The set of buttons is given the styles of font-family as 'Oxygen', sans-serif, display as inline- flex, and position as relative. The button numbers have the styles of color as #e44251, background color as transparent, font size as 25px, font-weight as 700, line-height as 30px, transition of all 0.4s ease 0s, border value of 1px solid #e44251, and height and width as 45px. The background of the button turns to #e44251 in a focus event making it highlighted in red color. The transformation style is given by scale (0) rotate (360deg).
This is an example of a page navigation button line, designed with CSS and HTML. The buttons are set to get highlighted in blue color, in a focus event. The Li element of lists has been used to display the buttons in a list. The set of buttons is given the styles of font-family as 'Pacifico', cursive, padding as 10px 0, border-radius as 25px, box-shadow as 0 0 10px #999, display as inline- flex, and position as relative. The button numbers have the styles of color as #777, background color as transparent, font size as 28px, line-height as 38px, transition of all 0.3s ease 0s, and height and width as 45px. The background of the button turns to #0984e3 in a focus event making it highlighted in blue color. The border-radius is set as 50% to make it a circle and the transformation style is set as scale (1.3).
This is a template of a page navigation button line, designed with CSS and HTML. The buttons are set to get highlighted and pointed with an arrow mark in a focus event. The Li element of lists has been used to display the buttons in a list. The set of buttons is given the styles of font-family as 'ABeeZee', sans-serif, display as inline- flex, and position as relative. The button numbers have the styles of color as #444, background color as transparent, font size as 23px, font-weight as 600, line-height as 42px, transition of all 0.3s ease 0s, border radius of 50% to make the circles, and height and width as 42px. The text color will turn to #6c5ce7 in a focus event and the number button will get highlighted with a box shadow set as 0 0 20px 5px #6c5ce7. In a focus event, the transformation happens with translate (-50%) translateX (-50%) scale(0.8) style. The shape of the highlight event has been specified with a polygon element added to the code with WebKit-clip-path: polygon.
This is a template of a page navigation button line, designed with CSS and HTML. The buttons are set to get highlighted in green color, in a focus event. The Li element of lists has been used to display the buttons in a list view. The set of buttons is given the styles of font-family as 'Gugi', cursive, padding as 7px 15px, border-bottom as 2px solid #909090, box-shadow as 0 5px 5px -7px #000, display as inline- flex, and position as relative. The button numbers have the styles of color as #444, background color as transparent, font size as 25px, font-weight as 700, line-height as 35px, transition of all 0.3s ease 0s, and height and width as 40px and 65px respectively. The text color will turn to #fff in a focus event and the number button will get highlighted in #3eed23 color. The animation transformation is set with translateX (-50%) translate (50%).
This is another example of a page navigation button line, designed with HTML and CSS. The buttons take a highlight action in a focus event. The Li element of lists has been used to display the buttons in a list. The set of buttons is given the styles of background color as #341f97, font-family as 'Kodchasan', sans-serif, padding as 5px, display as inline- flex, and position as relative. The button numbers have the styles of color as #fff, background color as #5f27cd, font size as 24px, letter-spacing as 1px, text-shadow as 1px 1px 0 rgba(0, 0, 0, 0.2), line-height as 37px, height and width as 42px, and a border of 3px solid transparent. The text-transform is set as uppercase to automatically transform it to uppercase. The buttons will get highlighted in a focus event, taking a transformation of scale (1.3).
This is an example of a page navigation button line, designed with CSS and HTML. The buttons take a highlight action in a focus event. The Li element of lists has been used to display the buttons in a list view. The body is given a background color of #A2DCF0 whereas the set of buttons is given the styles of font-family as 'Kodchasan', sans-serif, border-radius as 40px, overflow as hidden, display as inline- flex, and position as relative. The button numbers have the styles of color as #505050, background color as transparent, font size as 25px, font-weight as 600, padding as 10px 20px, and a transition of all 0.3s ease 0s. The buttons will get highlighted in a focus event, taking the color of #E24A3C. The buttons have a transform style of scaleY (0) and a transition of all 0.3s.
This is another template of a page navigation button line, designed with CSS and HTML. The buttons take a highlight action in a focus event. The Li element of lists has been used to display the buttons in a list. The body is given a style set of background color as #142328 whereas the set of buttons is given the styles of font-family as 'Kodchasan', sans-serif, border-radius as 40px, border-color as 2px solid #FE1739, display as inline- flex, and position as relative. The buttons will get transformed in a focus event with its transform style set to skewX (-16deg) scale(1). The numbers have been given a color of #fff, font-size as 22px, font-weight as 600, height and width as 45px and 55px, text-align as center and a transition of all 0.3s ease 0s.
This is a template of a page navigation button line, designed with CSS and HTML. The Li element of lists has been used to display the buttons in a list. The body is given a style set of font-family as 'Noto Sans', sans-serif, display as inline- flex, and position as relative. The numbers have been given a color of #2980b9, font-size as 22px, font-weight as 600, height and width as 45px, and a transition of all 0.3s ease 0s. The next and previous buttons take the color of #2c3e50 in a focus event. The shape of the highlight event has been specified with a polygon element added to the code with WebKit-clip-path: polygon. A transition rate is added with a transition: all 0.3s ease 0s.
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter