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
15. https://webdesignerwall.com/create-snippet?snippet_id=7914 This is an example of an image card layout form with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The icons and images are imported to the form with their URLs. The font style for the form is given as 'Segoe UI', sans-serif. The background of the form is given two colors; #444, and #f2f2f2. The gray shaped area is given the styles of top as -200px, left as -450px, width as 3000px, and height as 530px. The white shaped area is given the styles of top as 135px, left as calc(50vw - 150px), height as calc(350px + 4vw), and width as 300px. The content section has the styles of display as inline-block, margin-top as calc(50% + 4vw), width as 80%, height as 40%, padding as 0 10%, text-align as left, and color as #444. The name title is given the styles of color as #222, font-size as 25px, and font-weight as normal. The description is given a font-size of 15px. The icons are given a cursor style as pointer to get the hand cursor effect and change their color into #222, in a hover event. Source: https://codepen.io/Pedru/pen/XWJGpqz
This is a sample template of a web form with a slider with a fill and configurable tick marks, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The icons and fonts are imported to the code with their URLs. JavaScript functions have been used to implement the slider functionalities. The colors and sizes are predefined. The slider container is given a max-width as 440px, border-radius as 40px, and box-shadow as 0px 8px 40px rgba(128, 128, 128, 0.15). The slider headers are given the styles of font-family as "Poppins", sans-serif, font-size as 18px, font-weight as 300, and color as #71738b. The slider value container is given the styles of font-family as "Hind Madurai", sans-serif, font-size as 18px, and color as #71738b. The slider value is given a font color of #34385a. The slider handle size is defined as 14px, whereas the slider progress is shown in #ffd049 color. The cursor style for the slider is set as pointer to get the hand cursor effect. Source: https://codepen.io/viestursm/pen/BayEjaN
This is an example of a submission web form with animations, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The images are imported to the code with their URLs. JavaScript functions have been used to implement the animations on the submit button click. The colors are predefined as $o as #ffa440, $g as #01a500, $b as #6a88fe, and $elastic as cubic-bezier(0.175, 0.885, 0.32, 1.275). The body of the form is given the styles of display as grid, place-items as center, height as 100vh, font-family as 'Press Start 2P', overflow as hidden, and background as $b. The fireworks image is given height and width of 16px, and a transform style of scale(2), with an animation style of boom 0.5s steps(2, end) 1 forwards, fade 0s ease-in-out 1 forwards. The green color pipe is given a transition of 1.5s $elastic, and animation of grow2 0.5s ease-in-out 1 forwards, run2 1.5s ease-in 1 forwards. Source: https://codepen.io/cobra_winfrey/pen/OJVJJoj
This is a web form with a responsive photo gallery grid, designed using CSS, HTML, and Bootstrap framework 4. The images and CSS styles have been imported to the code with their URLs, whereas the media queries are used to increase the responsiveness of the form. The number of rows and the minimum number of columns for the grid is given as 3 and 2, respectively. The background of the form is given as #262626, with the height as 100vh, and filter as drop-shadow(2px 2px 5px). The hex cell is given the styles of grid-column-end as span 2, margin as calc(-1*var(--hl)) 0, transform as scale(.95), and clip-path as polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%) to implement the polygon shape. The images are given a transform style of scale(calc(1 + .2*var(--hl))). In a hover event, the images in the hex cell, take a zooming effect. Source: https://codepen.io/thebabydino/pen/PowXYpV
This is an example of a web form with buttons with hover effects, designed using HTML, CSS, JavaScript and Bootstrap framework 4. The icons have been imported to the code with their URLs, whereas the media queries are used to increase the responsiveness of the form. JavaScript functions have been used to implement the hover effects on buttons. There are three buttons in the form named as Buttton, Playful Hover, and Simple. The colors are predefined as --color-hover: #2B3044, --background: #362A89, --hover-back: #6D58FF, --hover-front: #F6F8FF, --background: #275EFE, and --background-hover: #1749DB. The cursor style for the buttons is set as pointer to get the hand cursor effect. The form is given the styles of font-family as 'Inter UI', 'Inter', Arial, and background as #E1E6F9. The buttons are given the styles of border-radius as 20px, line-height as 24px, font-size as 14px, font-weight as 600, and letter-spacing as .02em. The first two buttons take a fill effect with the colors #6D58FF, and #F6F8FF, whereas the third one takes a transforming effect. Source: https://codepen.io/aaroniker/pen/OJPqPMR
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
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter