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 another example of a card layout with a bordered image with various text in it and a hover effect, designed using HTML, CSS, and JavaScript. The fonts are imported to the form with its URL and JavaScript functions have been used to implement the mouse hover effects. The card is given the styles of font-family as 'Open Sans', Arial, sans-serif, margin as 10px, min-width as 230px, max-width as 315px, width as 100%, color as #ffffff, text-align as center, font-size as 14px, position as relative, padding as 10px, border as 2px solid #e8b563, and box-sizing as border-box. The image has the styles of vertical-align as top, max-width as 100%, and background color as linear-gradient (#000000, #ffffff). The text-transform style for all the titles is set as uppercase to automatically transform the text to uppercase. The header two is given the styles; top as 50%, transform as translateY(-50%), font-size as 2em, and font-family as 'Playfair Display', Arial, sans-serif and half of it is given the color #e8b563. The bottom link is given the styles of font-size: 1.3em, font-weight: 700, and letter-spacing: 2px whereas the styles for the name title is set as font-size: 1.2em, letter-spacing: 1px, font-weight: 400, opacity: 0.9, and font-family: 'Playfair Display', Arial, sans-serif.
This is another example of a profile card layout with title, position, text, and icons, designed using CSS, HTML, and JavaScript. The fonts, icons, and images are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The image card is given the styles of font-family as 'Lato', Arial, sans-serif, position as relative, display as inline-block, overflow as hidden, margin as 10px, min-width as 250px, max-width as 310px, width as 100%, background-color as #ffffff, color as #2B2B2B, text-align as center, font-size as 16px, and box-shadow as 0 0 5px rgba(0, 0, 0, 0.15). The image has the styles of vertical-align as top, max-width as 100%, position as relative and border-radius as 50% to make it round shaped. The title has been given a font family of 'Oswald', text-transform as uppercase, font-size as 20px, font-weight as 400, line-height as 24px, and margin as 3px 0 whereas position is given the color #888 and letter-spacing of 1px. The icons are given a style set of font-size as 1.5em and color of #999 which changes to #555 in a hover event.
This is another example of a card layout with images with a title and a description that appears on hover, designed using HTML, JavaScript, and CSS. The fonts and images are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The image card is given the styles of background-color as #fff, color as #ffffff, display as inline-block, font-family as 'Source Sans Pro', sans-serif, font-size as 16px, margin as 10px 5px, max-width as 315px, min-width as 230px, overflow as hidden, position as relative, text-align as right, and width as 100%. The image has the styles of vertical-align as top, max-width as 100%, and backface-visibility as hidden. The upper layer is given the color #b81212 which takes a transforming effect of skew(-30deg), in a hover event. The name has the styles of font-family as 'Teko', sans-serif, font-size as 36px, font-weight as 700, line-height as 1em, and text-transform as uppercase whereas the description is given a font-size of 0.9em.
This is another example of a web form with buttons with a border effect on hover, designed using HTML, CSS, and JavaScript. The fonts are imported to the form with its URL and JavaScript functions have been used to implement the mouse hover effects. The button is given the styles of background-color as #ffffff, border-bottom as 6px solid #029ebe, border-top as 6px solid #029ebe, color as #555, cursor as pointer to make the cursor a hand pointer, display as inline-block, font-family as 'Raleway', Arial, sans-serif, font-size as 14px, font-weight as 500, height as 46px, letter-spacing as 3px,line-height as 34px, margin as 15px 45px, padding as 0 10px, position as relative, and text-transform as uppercase to automatically transform the text to uppercase. The background color of the form is set to #212121. The color of the remaining space of the border is set as 6px solid #ddd which changes the color to #029ebe in a hover event to complete the border, with a transformation style of rotate(225deg).
This is a template of a web form with rounded images with an icon on a hover event, designed using JavaScript, HTML, and CSS. The fonts and images are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The image card is given the styles of position as relative, display as inline-block, margin as 20px, max-width as 190px, width as 100%, color as #bbb, font-size as 16px, and transform as translateZ(0). The image is given the styles of vertical-align as top, max-width as 100%, backface-visibility as hidden, padding as 10px, and border-radius as 50% to make it a circle. The icon in the middle is given the styles of position as absolute, top as 50%, left as 50%, font size as 4em, and transform as translate(-50%, -50%). In a hover event, the background of the image changes the color to rgba(0, 0, 0, 0.9) and its opacity to 1 whereas the border of the image with the style 2px solid #bbb gets a transforming effect of rotate(45deg).
This is an example of a web form with a set icons with a page turn effect on hover, designed using CSS, HTML, and JavaScript. The fonts and icons are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The icons are given the styles of box-sizing: border-box, perspective: 50em, transition: all 0.4s ease, background-color: #7e1946, border-radius: 5px, border: 1px solid rgba(255, 255, 255, 0.1), box-sizing: 0 0 5px rgba(0, 0, 0, 0.5), color: #e6e6e6, display: inline-block, font-size: 40px,height: 75px, line-height: 75px, margin: 40px, position: relative, text-align: center, and width: 75px. The icons are given a border radius of 5px 0 0 5px. The icons are primarily given two background colors; #69153a and #7e1946 which change into #1d5599 and #2468bb, in a hover event with a transform style of transform: rotateY(180deg).
This is another example of a card layout with images that have a slide down icon appearing on them as a hover effect, designed using CSS, HTML, and JavaScript. The fonts and images are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The image card is given the styles of position as relative, display as inline-block, overflow as hidden, margin as 10px,min-width as 230px, max-width as 315px, width as 100%, color as #ffffff, font-size as 16px, and transform as translateZ(0). %. The image has the styles of vertical-align as top, max-width as 100%, and backface-visibility as hidden. In a hover event, a card with the icon and background color of #009ab6, opacity of 1, appears in front of the image card with a transforming effect of translateX(0).
This is an example of a profile card layout with images, icons, and speech bubble details, designed using HTML, CSS, and JavaScript. The fonts, icons, and images are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The image card is given the styles of font-family as 'Open Sans', Arial, sans-serif, position as relative, display as inline-block, margin as 10px, min-width as 230px, max-width as 315px, width as 100%, color as #141414, text-align as left, line-height as 1.4em, and font-size as 14px. The image has been given the styles of border-radius as 5px, max-width as 100%, height as 80px, vertical-align as top, and float as left. The background color of the body is set to #212121. The name is given a font-weight of 600, font-size of 1.2 em, and font-family as 'Montserrat', Arial, sans-serif whereas the designation is given the styles of color as #8c8c8c, font-weight as 400, and letter-spacing as 2px. The quote has the styles of font size as 0.9em, letter-spacing as 1px, and opacity as 0.9. In a hover event, the social media icons will change its opacity from 0.75 to 1 in a transition effect of all 0.35s ease.
This is another example of a card layout with images that have buttons appearing on them as a hover effect, designed using CSS, HTML, and JavaScript. The fonts and images are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The image card is given the styles of background-color as #000, display as inline-block, font-family as 'Open Sans', sans-serif, font-size as 16px, margin as 10px, max-width as 315px, min-width as 230px, position as relative, text-align as center, and width as 100%. The image has the styles of vertical-align as top, max-width as 100%, and backface-visibility as hidden. The button inside is given the styles background-color as #000000, border as 2px solid #fff, color as #fff, font-size as 1em, font-weight as 600, letter-spacing as 1px, padding as 5px 10px, and text-transform as uppercase. In a hover event, the opacity of the image becomes 0.5 and takes a transform style of skew(45deg) translateX(55%).
This is an example of a card layout with an image and title with title border effect on hover, designed using HTML, CSS, and JavaScript. The fonts and images are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The image card is given the styles of background-color as #000, display as inline-block, font-family as 'Open Sans', sans-serif, font-size as 16px, margin as 10px, max-width as 315px, min-width as 230px, overflow as hidden, position as relative, text-align as center, and width as 100%. The image has the styles of vertical-align as top, max-width as 100%, and backface-visibility as hidden. The title inside the image s given the styles of background-color as #c73232, color as #ffffff, font-size as 0.9em, font-weight as 600, letter-spacing as 1px, padding as 5px 10px, and text-transform as uppercase to automatically transform the text to uppercase. In a hover event, the opacity of the image becomes 0.1 and the title gets a border effect with the color #ffffff.
This is another template of a web form with image cards with overlying text, designed using HTML, CSS, and JavaScript. The fonts and images are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The image card is given the styles of font-family as 'Lato', Arial, sans-serif, position as relative, display as inline-block, margin as 10px, min-width as 250px, max-width as310px, width as 100%, background-color as #000000, color as #ffffff, text-align as center, font-size as 16px, and box-shadow as 0 0 5px rgba(0, 0, 0, 0.15). The opacity for the image is set as 0.7 and it is given the styles vertical-align as top and max-width: 100%. The quote inside the image is given a font size of 1.2em, and a font-style of Italic. The title inside has the styles of font-family as 'Oswald', text-transform as uppercase to automatically transform the text to uppercase, font-size as 20px, font-weight as 400, line-height as 24px, and margin as 3px 0 whereas the subtitle is given the styles font-weight as 400, text-transform as uppercase, color as #bbb, and letter-spacing as 1px.
This is a template of a web form with bordered line buttons with a corner tab, designed using CSS, HTML, and JavaScript. There are four buttons in the form; submit, read more, add to cart and subscribe. The fonts are imported to the form with their URLs whereas JavaScript functions have been used to implement the mouse hover effects. The form is given a background color of #212121. The tabs are given the styles of font-family: 'Roboto', Arial, sans-serif, color: #ffffff, cursor: pointer to get the hand cursor, padding: 0px 40px, display: inline-block, margin: 15px 30px, text-transform: uppercase to automatically transform the text to uppercase, line-height: 2.7em, letter-spacing: 1.5px, font-size: 1em, font-size: 16px, border: 3px solid #fff, background-color: transparent, border-radius: 15px 0 15px 15px, and transition: all 0.3s. In a hover event, the border of the tabs take the color of #c87f0a.
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter