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 simple user profile card with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The image is imported to the code with its URL, whereas media quarries are used to increase the responsiveness of the form. The body of the form is given the styles of min-height as 100vh, and a linear background as linear-gradient(transparent, rgba( 110, 110, 110, .3)), linear-gradient(100deg, rgba(250, 214, 195, .8) 30%, #B0EAE8 120%). The profile card header is given the styles of background as #272727, border-left as 0.625rem solid #97ece1, padding: 1.5em 1.5em 1em, and text-align as center. The image card container is given the styles of display as block, width, and height as 9.5rem, background as rgba(250, 214, 195, 1), and border as 0.375rem solid rgba(250, 214, 195, 1). The image is given a grayscale filter. The profile header title has the styles of color as #f3f3f3, font-size as 1.5rem, margin-top as 0.8em, and font-family as 'Oswald', sans-serif. The paw and heart icons are given a transform style of scale(1.2), in a hover event. The Full Adoption Profile link takes the styles of border-top-color as #222, and border-bottom-color as #fdc1a0, in a hover event. Source: https://codepen.io/meowwwls/pen/reQQeb
This is an example of a loading bar animation, designed using HTML, CSS, Bootstrap framework 4. The body of the form is given the styles of display as flex, justify-content as center, align-items as center, height as 100vh, and background as #ECEFFC. The implementation of the loading feature has been done by giving different animations and styles into four bars. The loading container is given the styles of position as relative, width as 45px, height as 45px, and a transform value as rotate(75deg). An individual bar is given an animation of 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) infinite. The first child element is given a background color of #0984e3, and an animation style of slide-bottom-top, whereas the second child element has the background color of #d63031, and animation style of slide-left-right. The third and fourth ones are given the background colors and animation styles of #fdcb6e, #00b894, slide-top-bottom, and slide-right-left, respectively. Source: https://codepen.io/alphardex/pen/abzaxBB

Bar Loading

4.3.1
This is an example of a star rating form, designed using HTML, CSS, and Bootstrap framework 4. The star-shaped radio icons are imported to the form with its URLs. The body of the form is given the styles of background as #F4F2F3, text-align as center, display as flex, flex-direction as column, and justify-content as center. The title of the form is given the styles of font-family as 'Fjalla One', sans-serif, and margin-bottom as 0.15rem, whereas the subtitle is given a style set of font-family as 'Cutive Mono', 'Courier New', font-size as 1rem, letter-spacing as 1px, and margin-bottom as 4rem. The cursor style for the radio buttons is set as pointer to get the hand cursor effect on a hover event. The stars are given the styles of color as transparent, and transition as color 0.2s ease-in-out to make them transparent. When checked, the radio button stars get filled with the color #d62a9d. Source: https://codepen.io/meowwwls/pen/BzaWZg
This is an example of a floating label layout, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The JavaScript functions have been used to implement the floating functionality of the labels. The body of the form is given the styles of min-height as 100vh, background as HSL(215,21%,24%), font-family as 'Roboto Condensed', sans-serif, and letter-spacing as 0.1em. The input label has the styles of display as block, height as 100%, width as 35%, padding-left and padding-right as 0.75em, background as HSL(320,69%,53%), color as white, line-height as 2.5rem, text-transform as uppercase to automatically convert the text to uppercase, and transition as transform 0.3s ease-in-out. The input field has the styles of height as 2.5rem, width as 100%, padding-left as 38%, color as HSL(215,21%,24%), border as 1px solid HSL(320,69%,53%), and transition as padding-left 0.3s ease. When an input field is checked, the border and the label color becomes HSL(90,44%,71%), and the font color becomes white. Source: https://codepen.io/meowwwls/pen/JGbwKw
This is an example of a web form with radio buttons with hopping animations, designed using HTML, CSS, and Bootstrap framework 4. The body of the form is given a style set of background color as #f1f1f1, font color as #171717, display as flex, font as 1em Ubuntu, sans-serif, height as 100vh, line-height as 1.5, and padding as 1.5em 0. The animation timing, duration, and colors are predefined as $wormDur: 0.4s, $radioDur: 0.2s, $timing1: cubic-bezier(0.45,0.05,0.55,0.95), $timing2: cubic-bezier(0.5,0,0.5,2), and $shadowColor: rgba(0,0,0,0.2). The label of the radio button is given the styles of $shadowColor as rgba(0,0,0,0.2), cursor style as pointer to get the hand cursor effect in a hover event, font-weight as bold, text-shadow as 0 0.1em 0.1em $shadowColor, transition as color $radioDur $timing1, and margin-bottom as 1.5em. The radio button and the labels take the color of #2762f3 in the active mode. Media queries have been used to increase the responsiveness of the form. Source: https://codepen.io/jkantner/pen/rNaPadg
This is an example of an input boxes layout, designed using HTML, CSS, and Bootstrap framework 4. The values and colors are predefined as variables. The body of the form is given the styles of font-family as "Lato", sans-serif, and font-size as 16px. The section header is given the styles of text-transform as uppercase to automatically convert the text to uppercase, font-weight as bold, color as #9FAAB7, font-size as 16px/1.4, and margin-bottom as 1.4. The input fields are given the styles of border as 1px solid #C0CCDA, margin-bottom as 16px, and border-radius as 4px. The input fields take a border-color of #270D7C, in a checked event. The input text is given the styles of opacity as 1, font-size as 8px* 1.4, background-color as white, color as #9FAAB7, padding as 4px/2 4px, and margin as -58px 0 0 8px*1.4. Source: https://codepen.io/swapnet/pen/oJeKyL
This is an example of a photo gallery layout designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The images and fonts are imported to the code with their URLs, whereas the JavaScript functions have been used to rotate the image cards at a random angle. The body of the form is given the styles of font-family as 'Poor Story', cursive, and background as #5b9489. The image card has the styles of margin as 30px, width as 400px, height as 450px, background-color as white, padding as 1rem, and box-shadow as 0 0.2rem 1.2rem rgba(0,0,0,0.2). The image is given a height of 350px and a width of 100%. The caption of the image is given the styles of display as flex, justify-content as center, align-items as center, and font-size as 25px. Source: https://codepen.io/braydoncoyer/pen/yLyQqdR
This is an example of a web form with neuomorphic checkboxes container, designed using HTML, CSS, and Bootstrap framework 4. The icons and fonts are imported to the code with their URLs. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the icons in an orderly manner. The body of the form is given the styles of display as flex, justify-content as center, align-items as center, min-height as 100vh, and background as #ebf5fc. The checkbox icons are given a background color of #6a9bd8. The checkbox container is given the styles of width and height as 60px, background as #ebf5fc, display as flex, justify-content as center, align-items as center, box-shadow as -2px -2px 5px rgba(255, 255, 255, 1), 3px 3px 5px rgba(0, 0, 0, 0.1), and border-radius as 10px. The checkbox icons take a box-shadow effect of -2px -2px 5px rgba(255, 255, 255, 1), 3px 3px 5px rgba(0, 0, 0, 0.1), when they are in checked mode. Source: https://codepen.io/braydoncoyer/pen/yLyrWOq
This is an example of a neomorphic login web form with hover effects, designed using CSS, HTML, and Bootstrap framework 4. The colors used in the form are predefined as $color-red: #AE1100, $color-bg: #EBECF0, $color-shadow: #BABECC, and $color-white: #FFF. The form is given a background color of $color-bg. The body and button sections are given the styles of font-family as 'Montserrat', sans-serif, letter-spacing as -0.2px, and font-size as 16px. The login button is given a font size as 16px and a padding as 16px, and a background color as $color-bg, and a text shadow as 1px 1px 0 $color-white. The input fields are given a box-shadow of inset 2px 2px 5px $color-shadow, inset -5px -5px 10px $color-white, and a transition value as all 0.2s ease-in-out. The login button is given a cursor style as pointer to get the hand cursor effect in a hover event, font-weight as 600, color as #61677C, transition as all 0.2s ease-in-out, and box-shadow as -5px -5px 20px $color-white, 5px 5px 20px $color-shadow. In a focus event, the box-shadow of the input fields turns to inset 1px 1px 2px $color-shadow, inset -1px -1px 2px $color-white. In hover and active events, the login button takes the styles of box shadow as -2px -2px 5px $color-white, 2px 2px 5px $color-shadow, and inset 1px 1px 2px $color-shadow, inset -1px -1px 2px $color-white. Source: https://codepen.io/swapnet/pen/QWwPVwE
This is an example of a download interaction button with animations, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The icons are imported to the code with their URLs, whereas the JavaScript functions have been used to implement the downloading animation. The body is given the styles of background as #E8EBF3, height as 100vh, font as 400 16px 'Poppins', sans-serif, display as flex, flex-direction as column, justify-content as center, and align-items as center. The download icon box is given a border-radius of 3px, and a box shadow of 0 10px 30px rgba(#000000, 0.2). The download button is given height and width of 55px, background color of #1F242D, cursor as pointer to get the hand cursor effect on a hover event, and a transition value of width .2s ease-in .4s, height .2s ease-in .4s, background .2s ease-in .4s. The arrow in the download button is given a background color of #FFFFFF, height of 15px, and width of 2px. The progress container is given the color of linear-gradient(to right top, #00A7FC, #0070ED). Source: https://codepen.io/milanraring/pen/jOEOmbv
This is an example of a toggle buttons card layout with animations, designed using CSS, HTML, and Bootstrap framework 4. The icons and CSS styles are imported to the code with their URLs, whereas media queries have been used to increase the responsiveness of the form. The form has eight toggle button container cards named as Normal, Transparent, Yes & No, Gravity, Pancake Stacks, Doggo Wants a Treat, Kobe Bryant Tribute, and Beer Pong. The body of the form is given a background color of #2e394d, whereas the toggle button containers are given eight different background colors. The colors are #dec387, #de8797, #87aade, #c5de87, #87ded2, #c487de, #de8787, and #decf87. The title of the toggle button container is given the styles of font as 500 14px 'Rubik', sans-serif, letter-spacing as .5px, text-transform as uppercase, and text-shadow as 0 1px 1px rgba(0,0,0,0.4). The toggle buttons are given the styles of width as 7em, background as #2e394d, height as 3em, display as inline-block, border-radius as 50px, margin as 40px, transition as all .3s ease, transform-origin as 20% center, and cursor as pointer to get the hand cursor effect on a hover event. The toggle buttons take different animations such as rotating, hooping, and rolling over when the buttons are checked as active. Source: https://codepen.io/oliviale/pen/xxboXzo
This is an example of a simple toggle button, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The menu icon is imported to the code with its URL. The JavaScript functions have been used to implement the expand feature of the toggle button. The body of the form is given a background color of #ffffff. The plus icon is given the styles of width as 100px, cursor as pointer to get the hand cursor effect on a hover event, transition as all .3s ease 0s, height as 100px, background color as #ffe581, border-radius as 50% to get the circle shape, display as flex, and position as relative. The line in the plus icon has the styles of width as 6px, height as 50px, background as #000, and border-radius as 10px. The line takes a transform effect of rotate(90deg) when it’s checked to form the links menu. The menu links are given the styles of color as #fff, font-size as 30px, visibility as hidden to be hidden when inactive, transition as .3s ease 0s and transform as scale(.5). Source: https://codepen.io/knyttneve/pen/rGLxbP
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter