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
This is a keypress event where a certain element gets focused when the key that starts that element is pressed down. This is written in JavaScript. To handle the keypress event, the “key-down” function has been used in and to validate it to work only for alpha characters, a list has been declared with all the alphabetical characters with its Hexa value. There are three functions used here; handleAlphaKeyPresses, matchElemToKey and cycle focus and the use of them are respectively, to apply the keypress event, to find all the matching elements and return them and to make the “li > an” element. CSS styles have been used to apply mouse hover styles with the “hover” class and to apply the styles for the selected div with the “focus” class. Source: https://codepen.io/miclgael/pen/LJJvyP?&page=1
This code is used to design a responsive navigation bar where it dynamically changes according to the screen size. If the screen width is greater than 700px, the “nav-bar” class will be displayed and “small-navbar” will be hidden and vice versa. The style “display” is used with the value “none” to hide the visibility and the value “block” to make it visible. To identify the screen size, the media screen attribute has been used by specifying a min-width. The input element has been used with its type checkbox to display the clickable div; its clicked events have been handled by applying the styles when checked and remove the styles when unchecked. Source: https://codepen.io/jewel998/pen/exVpQK?&page=1
This is an example of the mouse hover effect using pure CSS styles without any JavaScript’s. The slide in animation allows expanding a menu when the mouse cursor hovers over the div whereas the slide-out animation closes the menu when the cursor moves out of the div. It uses the “transform” style to slide in and out of the div. The translated is used to make the slide in and out horizontal. The hover event in styles has been used to append the styles when the cursor gets on a specific div. The “text-transform” style has been used to convert the given HTML text into uppercase automatically by setting its value to “uppercase”. Source: https://codepen.io/codboy_3/pen/pmMzzp
This is a classic calendar type example where Bootstrap 3.4 is used with the .pagination class providing links. This snippet shows a way to use your custom classes. Here pag-month and pag-year are custom classes used along with .pagination. CSS is quite simple it takes care of the styling of .pagination elements during the active and inactive state also it styles the month and year custom classes in an active and inactive state. To display the pages linked to this list you need to write custom javascript. This pagination goes with a calendar or with monthly event s and notes, which need to be displayed on the web site. You can use this snippet by tweaking for your webpage.
This is a Pure CSS pagination example where you can set the finite number of pages using the HTML and link those pages to the page number of pagination. The pagination elements can be customized and styled using CSS styling. Here we are using @keyframes rules for the pages. The @keyframes specifies the rules for animations by gradually changing from one set of CSS styles to another. Here we are transforming the scale from 1.5 to 1, and opacity from 0 to 1.The Javascript is used to change the active attribute to the pagination. Use this snippet if you can handle the CSS and javascript part as its purely based on CSS and script and not on any UI/UX framework.
This is an example of CSS based paging without paging elements used in HTML. Here we are using a class called pagination with the ordered list attached to this class. The list is linked with the respective pages and to mention active page, we create a class called “active link”. Check out the previous and next links. The CSS part plays the trick for this snippet. It defines the styles for pagination class and its elements. See the style for hovering, once active the color is changed to blue and then black. The javascript file is used to change the pagination length. If the pages are more you could change it dynamically. Use this snippet when the content is not large, and to have an epsilon look to your pagination element.
This example is of pagination using TYPO3. TYPO3 is an open-source web content management system written in PHP. Here we can see 3 different pagination styles. To create the pagination in TYPO3, you need the widget < f:widget.paginate> , which is then linked to pages along with the numbers created in the list. You can even set the alignment of the pages and number set on widget along with the HTML page. CSS plays an important role. The previous and next buttons display the logo where are the page numbers are highlighted when hovered. You can use this CSS and code for pagination for the CMS or YPO projects.
This snippet displays the pagination with gooey animation using SVG. To display the goory animation we will use SVG. SVG plays with the shapes and allows to easily connecting the divs. Using SVG, we will create a filter and apply to the HTML element (DIV). For this, the concept used is CSS transition, CSS animation, SVG filters, and JQuery. Over your mouse and check out the animation used. Here the filter is defined under SVG in an HTML page and using CSS we apply this SVG filter to DOM element. Filter element contains one or more filter primitives, which defines the operation done by filters in this example its “blur”. To make the sticky part, we are using filter to change colors based on the transformation matrix. This gives users the power to manipulate the image with special effects. To use this snippet you need to take a look at SVG and its filters and design it accordingly.
If you are going for the pagination without bootstrap or JQuery then this is an excellent example of pagination with only CSS. It is the simple page with the content for three different pages with the footer at the end of the page. There is no pagination element used, it only works on CSS styling with 3 radio buttons on the top of the page, instead of the traditional pagination displayed at the end of the page. Once you click on the radio button the respective data is displayed on the screen. This can be used only when you have a defined set of data and pages to be displayed. You cannot have it dynamically like the grid or .pagination element of the bootstrap. The code used in CSS displays the content in the block once the radio button is clicked. This can be used in your blog.
This snippet displays the complete example of Datatables of JS Library with pagination. This uses the Bootstrap 4 and Jquery 3.3, to create the table using a .table-fluid class which is responsible for the responsive nature of this table. Check out this table on various screen display, this would make the table display its responsive nature. The grid displays the 3 columns with sorting enabled in ascending and descending order. It has the search with the setting for the number of records to display be displayed in the grid. Notice the number of pages displayed according to the settings and number of records. This example uses the jquery.datatables.min.css file for styling but you can have your custom styling for each element.
This is an example of pagination styled with CSS. It does not include any scripts. This uses Bootstrap 4 .pagination element. The trick to having such type of pagination displayed is the CSS styling. Element to define the previous page of the pagination-item is styled color and text whereas the shape for previous is styled with display and margin-bottom to give the specific shape. The .pagination items which are not current or previous or next are styled with same settings with the transforms to display the shape for their boxes. The item to be active has a specific color to be displayed as the current page. You can use this to create the pages dynamically using JavaScript.
This is an example of pagination displayed at the extreme sides of the page. An element with a .pagination class is created. It will host two elements with .previous and .next classes, and both of them are distributed at the extreme. This is an example of two-element pagination. Even on the mobile screen, the buttons are extreme so you will able to see it below one other. There is another example in this snippet. It is about one-element paging. Either one element will be visible on the first or last page. The CSS for this is simple with the styles assigned to the container and pagination elements. Media screen is used to make it responsive. It also uses the arrow icon is used .fa-angle-double in both the elements. You can use this simple snippet for web sites with pagination.
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter