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 an example of a List of Notes with animation styles on it using only CSS and HTML. To have the labels rotate sideways, class transform has been used with the value of rotating (-40deg) to rotate it 400 from right bottom to the top. The class hover in the CSS style has been used to apply the styles for the hovered div in the HTML. Focus class in CSS styles is used to apply the styles for the selected div. The effect of pulling up the label has been accomplished with the use of shadow in the div. Source: https://codepen.io/JeonghwanKim/pen/IhsdC
This is a simple example where the mouse hover has an animation of rotating the text using only CSS and HTML. The menu items here are set as circles with the use of the border-radius class. Class WebKit-transform is used to apply rotating animation and the value for it is set as rotate(-360deg) which then rotates 3600. This rotating animation is set up to the mouse hover div with the use of class hover for the selected div in the CSS. Source: https://codepen.io/npav/pen/BjhkH
This is a simple example for applying selected effects on the menu items for the top navigation bar with the mouse hover using only HTML and CSS. CSS style hover class is used to apply the selected effects with the mouse hover and to apply the shade of colours, the background-image class is set with a linear-gradient value. The initial background-size is set up to 100% for width and height to apply the selected effect. Source: https://codepen.io/nicoyanez/pen/pKjiC
This is an example of top navigation bars with different theme colours using only CSS styles. For each theme, the colour has been set in CSS, with the use of the background colour of the UL. For each li item, the shadow effect has been accomplished by the use of the style “box-shadow”. To make the navigation bar responsive, @media query has been used in CSS styles with the min-width as 40rem which applies the style for the larger screens of 640px or 1080px. The CSS class hover has been used to apply the selected effects for the mouse hover with the use of border-top, bottom, left and right styles when the cursor is on top of the div. Source: https://codepen.io/iPawan/pen/OVNrpr
This is an example to display a navigation bar with a dropdown list for a selected menu item using pure CSS. To apply the styles for the menu items, the styles of border-radius has been used for each “li” in the HTML with the use of top, bottom, left and right border-radius. The # and the name of the ID are used in the CSS styles to apply a specific style for a given ID and in this example, the ID of the parent li for the dropdown has been used in CSS styles. The mouse hover event is accomplished by the use of the hover class in the styles with setting the background value for each li element to display the focus element. Source: https://codepen.io/maya_hacizade/pen/jbRMjP
This is an example to have a menu on a leaf with pure CSS. Each section of the leaf has been created with different div sections and the middle section of the leaf has been created as a filled color square. The curves have been created with the style border-radius whereas transform rotate class has been used to get the oval shape horizontally. The menu, a href is displayed on top of the leaf div and to accomplish this, the position style has been set up to absolute for both divs and href. Applying the leaf fold style for a part of the leaf has been accomplished by setting the border colours and to display the shadow of the folded leaf, “box-shadow” class is used. Source: https://codepen.io/mallini/pen/GXRjOw
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.
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter