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 task management User Interface, designed using HTML, JavaScript, and Bootstrap framework 4. The users are given the ability to change the color theme of the interface by a color picker. JavaScript functions have been used to implement the color theme effect. The images have been imported to the code with their URLs. The interface is designed in two containers. The name title of the first container is given the styles of text as indigo-600, font as medium ml-3, whereas the description is given the styles of text as gray-600, and font as sm. The New Contact and New Task buttons have the styles of text as gray-600, and border as gray-400. There are checkboxes to select each person, and the theme buttons are assigned their respective colors to pick from. Source: https://codepen.io/knyttneve/pen/vYEzXOR
This is an example of an image card layout form with hover effects, designed using HTML, CSS, and Bootstrap framework 4. Media queries have been used to increase the responsiveness of the form, whereas the fonts and images are imported to the code with their URLs. The font sizes are predefined as --font-sans: 'Rubik', sans-serif, and --font-serif: 'Cardo', serif. The image cards are placed in a grid layout. The page content is given the styles of display as grid, grid-gap as 1rem, padding as 1rem, max-width as 1024px, and font-family as var(--font-sans). The title of the card has the styles of font-size as 1.3rem, font-weight as bold, and line-height as 1.2. The card description has the styles of font-family as var(--font-serif), font-size as 1.125rem, font-style as italic, and line-height as 1.35, whereas the button is given the styles of cursor as pointer to get the hand cursor effect, margin-top as 1.5rem, padding as 0.75rem 1.5rem, font-size as 0.65rem, and text-transform as uppercase to convert the text to uppercase. The button takes the background color of lighten(black, 5%), in a hover event and outline of 1px dashed yellow, in a focus event. The image cards take a transforming effect of translateY(-50%), in a hover event. Source: https://codepen.io/hexagoncircle/pen/XWbWKwL
This is an example of a password input form with a light beam animation, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. JavaScript functions have been used to implement the animation in a clicked event on the eyeball icon. The colors are predefined as --bgColor: white, --inputColor: black, --outlineColor: dodgerblue, and --beamColor: yellow. The body is given a background color as var(--bgColor), whereas the form is given a transform value as translate3d(0,0,0). The sign-in button has the styles of font-size as 1.5rem, font-family as monospace, and color as var(--inputColor), which takes an outline style of 3px solid var(--outlineColor), in a focus event. The user name and password are given a font color as black. The cursor style for the button and eyeball is set as pointer to get the hand cursor effect. The eyeball is given the size of 1.25rem, and a transform style of translateY(-50%). In a focus event on the eyeball, the background color of the form turns to black, revealing the password value and a light beam is displayed in a polygon(100% 50%, 100% 50%, 0 0, 0 100%) path, with the beam color as yellow. Source: https://codepen.io/hexagoncircle/pen/zYxzQqa
This is an example of a page header with page transitions, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The images 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 details in an orderly manner. The colors and values are predefined as --purple-brown: #231f20, --egg-shell: #e8e4d2, --dark-peach: #e26961, --border-width: .75rem, and --dots-gap: 10px. The body of the form is given the styles of font-family as Trocchi, Georgia, serif, line-height as 1.5, and color as var(--egg-shell). The background is given the styles of min-height as 100vh, padding as 25vh 0 1.5rem, and transition as background 0s 1s, color .6s. Bio, Projects, and Find Me sections are given different background colors as var(--purple-brown), var(--egg-shell), and var(--dark-peach). The dots are given an animation of movebg .2s linear infinite. Source: https://codepen.io/pehaa/pen/wvBLpNK
This is an example of a login form with hover animations, designed using CSS, HTML, and bootstrap framework 4. The fonts and icons are imported to the code with their URLs. The values and font sizes are predefined as color-primary: mediumslateblue, color-secondary: black, color-tertiary: hotpink, base-border-radius: 0.25rem, ease: cubic-bezier(0.075, 0.82, 0.165, 1), duration: 350ms, font-family: 'Roboto', sans-serif, and font-size: 1.25rem. The laels are given the styles of font-size as calc(var(--font-size) / 1.65), font-weight as 700, text-transform as uppercase to automatically convert the text to uppercase, and letter-spacing as 0.065rem. The body of the form is given a style set of padding as var(space-m), font-size as var(font-size), font-family as var(font-family), line-height as 1.2, and background-color as var(color-tertiary). The header of the form is given the styles of font-weight as 700, and font-size as calc(var(--font-size) * 1.5). The form is given a transform value of skewY(-5deg) translateY(10%) scale(0.94). In a hover event, the form takes a transform of scale(1.0001) to get the folded animation. Source: https://codepen.io/hexagoncircle/pen/XWJGQqy
This is an example of a web form with feedback reactions icons, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The icons 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. JavaScript functions are used to implement the active status of the feedback icons. The colors of the feedback icons are predefined as normal: #ECEAF3, normal-shadow: #D9D8E3, normal-mouth: #9795A4, normal-eye: #595861, active: #F8DA69, active-shadow: #F4B555, active-mouth: #F05136, active-eye: #313036, active-tear: #76b5e7, and active-shadow-angry: #e94f1d. The cursor style is set as pointer to get the hand cursor effect on the icons. There are five feedback icons named as angry, sad, ok, and two happy icons. Each icon is divided into four sections as eye left, eye right, and mouth. Reaction animations are created by giving different styles to eyes and mouth sections. Source: https://codepen.io/aaroniker/pen/mdyYBPP
This is an example of a web form with radio buttons with hopping animations, designed using HTML, CSS, and Bootstrap framework 4. Media queries have been used to increase the responsiveness of the form. The body of the form is given a style set of background as #f1f1f1, 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 has the styles of $shadowColor as rgba(0,0,0,0.2), cursor as pointer to get the hand cursor effect, font-weight as bold, text-shadow as 0 0.1em 0.1em $shadowColor, transition as color $radioDur $timing1, and margin-bottom as 1.5em. Once checked, the radio button and the labels take the color #2762f3. Source: https://codepen.io/jkantner/pen/rNaPadg
This is an example of a simple neomorphic signup/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, p, input, select, text area, 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 button is given a font size and a padding of 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 as inset 2px 2px 5px $color-shadow, inset -5px -5px 10px $color-white, and a transition value as all 0.2s ease-in-out. 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. The button is given a cursor style as pointer to get the hand cursor effect, 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, which changes to -2px -2px 5px $color-white, 2px 2px 5px $color-shadow, and inset 1px 1px 2px $color-shadow, inset -1px -1px 2px $color-white, in hover and active events, respectively. Source: https://codepen.io/swapnet/pen/QWwPVwE
This is an example of a toggle buttons layout with animations, designed using CSS, HTML, and Bootstrap framework 4. The icons and CSS animations are imported to the code with their URLs. Media queries have been used to increase the responsiveness of the form. There are eight toggle button containers 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. The eight toggle button containers are given eight different background colors which are #dec387, #de8797, #87aade, #c5de87, #87ded2, #c487de, #de8787, and #decf87. The name of the toggle button has 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 button is given the styles of width as 7em, background as #2e394d, height as 3em, border-radius as 50px, transition as all .3s ease, transform-origin as 20% center, and cursor as pointer. The toggle buttons are given different animation styles to work on a checked event. Source: https://codepen.io/oliviale/pen/xxboXzo
This is an example of a bootstrap toggle button with animations, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The fonts and icons are imported to the code with their URLs. JavaScript functions have been used to implement toggle features. The body of the form is given the styles of font-family as 'Lora', serif, and color as #303030. The night label is given an opacity value of 0.2. The toggle button is given a cursor style as pointer to get the hand cursor effect in a hover event. The day section of the toggle button is given a background color of #61b9e5, which changes to #d0edff, when the button switches to night, with a transform value of translate(-2 -2). The night section of the toggle button is given a background color of #004373, whereas the stars are given a background color of #fff5a6. The background color of the form turns to #b0b0b9 when the switch is turned to night event. Source: https://codepen.io/ste-vg/pen/oNgrYOb
This is another example of a web form with an animated line chart with animations, designed using HTML, CSS, JavaScript and Bootstrap framework 4. JavaScript functions have been used to implement the refresh button. The fonts and icons are imported to the code with their URLs. The colors are predefined as variables which are $green:#50E3C2, $blue:#21A6EE, $purple:#807CCC, $navy:#384051, $dot-color:fade-out(white,0.9), and $text-color:fade out(white, 0.7). The body is given the styles of background as $navy, color as $text-color, and font-family as "Montserrat", sans-serif. The credits section has the styles of width as 560px, margin as 9em auto 3em auto, text-align as center, and font-size as 0.75em. The chart is given a linear gradient color of (center center, $dot-color, $dot-color 2px, transparent 2px, transparent 100%), a width of 560px, height of 260px, and a background-size of 29px 29px. Datasets 1, 2, and 3 are given background colors of $green, $blue, and $purple, respectively. The refresh button is given a background as fade-out(white, 0.5), border-radius as 5px, color as $navy, padding as 0.25em 1em, font-size as 1em, and cursor style as pointer to get the hand cursor effect. Source: https://codepen.io/christiannaths/pen/yNBjBq
This is another example of a web form with an animated line chart with animations, designed using HTML, CSS, JavaScript and Bootstrap framework 4. JavaScript functions have been used to implement the chart. The background color of the form is set as #252429. The body of the form is given the styles of height as 100%, display as flex, flex-direction as column, align-items as center, justify-content as center, and width as 100%. The chart is given a style set of animation as fadeIn 600ms cubic-bezier(.57,.25,.65,1) 1 forwards, opacity as 0, max-width as 640px, and width as 100%. The chart color is set as a linear gradient color by combining rgba(255, 0,0, 0.5)'), rgba(255, 0, 0, 0.25)'), and rgba(255, 0, 0, 0)') colors. Chart labels have been defined as January, February, March, April, May, and June. The background color of the points is set as white. The styles for the tooltips is set as backgroundColor as 'rgba(0,0,0,0.3)', titleFontColor as 'red', caretSize as 5, cornerRadius as 2, xPadding as 10, and yPadding as 10. Source: https://codepen.io/grayghostvisuals/pen/gpROOz
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter