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 toggle buttons layout with animations, designed using HTML, CSS, 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 consists of eight toggle button containers named 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 toggle button containers are given eight different background colors which 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, border-radius as 50px, transition as all .3s ease, transform-origin as 20% center, and cursor as pointer to get the hand cursor effect in a hover event. The toggle buttons are given different animations to be generated in a checked event. Source: https://codepen.io/oliviale/pen/xxboXzo
This is an example of a task management dashboard interface, designed using HTML, CSS, and Bootstrap framework 4. The fonts and images are imported to the code with their URLs, whereas media queries have been used to make the form responsive. The colors are predefined as variables. The body is given a set of styles as justify-content as center, flex-direction as column, overflow as auto, width as 100%, height as 100vh, padding as 20px, font-family as 'DM Sans', sans-serif, and font-size as 12px. The cursor style for buttons is set as pointer to get the hand cursor effect. The left bar is given the styles of background-color #f5f8ff, width as 230px, and border-right as 1px solid #e3e7f7, whereas the right bar is given the styles of width as 320px, border-left as 1px solid #e3e7f7, display as flex, and flex-direction as column. The header is given the styles of font-size as 20px, color as #5d606b, and margin-left as 30px. The task box takes a transforming effect of scale(1.02), in a hover event. Source: https://codepen.io/aybukeceylan/pen/gOpbRPO
This is an example of a bootstrap timeline layout designed using HTML, CSS, and Bootstrap layout 4. External links 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 and timeline items in an orderly manner. The body of the form is given a style set of display as flex, justify-content as center, align-items as center, min-height as 100vh, and background color #1a1e23. The timeline is given a style set of display as grid to arrange the timeline in a grid layout, gap as 40px, max-width as 600px, font-size as 0.75rem, line-height as 1, font color as white, clip-path as inset(0 0 100% 0), animation as expand 5s forwards linear. The timeline list item is given a font color of #3498db, whereas the timeline line has a background color as white. Source: https://codepen.io/alphardex/pen/bGdNxea
This is an example of a web form with input types and pseudo-elements, designed using HTML, CSS, and Bootstrap framework 4. 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 and elements in an orderly manner. There are eight types of inputs and elements displayed on the form, which are text¸ radio, checkbox, range, color, button, text area, and Select. The wrapper class is given the styles of max-width as 600px, margin as 2rem auto 1rem. The header of the form is given a text-align style as center. The list items are displayed in a grid, and the number of columns for the grid is defined as 2. The grid-gap is set as 1rem, with the font-style for the list items is set as 16px/1.4 Arial, sans-serif. An outline style of 1px solid #DDD is set for the list item box, with a padding value as .5rem. Source: https://codepen.io/yoksel/pen/eYNmRNe
This is an example of a form with radio buttons with animations, designed using HTML, CSS, and Bootstrap framework 4. The type of buttons is defined as radio. The background image is imported to the code with its URL, whereas media queries have been used to increase the responsiveness of the form. The body of the form is given a style set of position as 50% 50%, color as #381803, display as flex, font as 1em Nunito, sans-serif, height as 100vh, and line-height as 1.5. The buttons are given the styles of max-width as 10em, padding as 1.5em 0, position as relative, and border-radius as 50% to get the circle shape. The button label is given the styles of cursor as pointer to get the hand cursor effect, display as flex, letter-spacing as 0.1em, width and height as 1.5em, box-shadow as 0 0 0.75em #000 inset and text-transform as uppercase to convert the text to uppercase. The color of the radio button ball is set as #2762f3. The radio ball is given a wobble effect as wobble# {$s} 0.5s linear forwards. Source: https://codepen.io/jkantner/pen/oNXjjZM
This is an example of a bootstrap contact form designed using HTML, CSS, and Bootstrap framework 4. The fonts and background images are imported to the form 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 contact form container is given the styles of background as #F4F3F3, and font-family as 'Lato', sans-serif. The Contact-US label is given a background colors of #C3E0EC, #F8B7D8, and #9ED8EB. The label title is given a font-size as 1.5rem, font color as white, and transform as rotate(-90deg) to make the label vertical. The social media icons bar is given the height and width of 25px. The header title is given a font color of #444, whereas the input fields have the styles of height and line-height as 40px, border-bottom as 1px solid rgba(68,68,68,.3), font-size as 1rem, and color as rgba(68,68,68,.8). The button is given the styles of border-radius as 20px, bottom as -20px, background as #9ED8EB, color as white, font-size as 1.1rem, and font-weight as 300. Source: https://codepen.io/rickyeckhardt/pen/rNVOrBL
This is an example of a segmented control interface 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 segments in an orderly manner, whereas JavaScript functions have been used to implement the segmentation animations. The body of the form is given the styles of width as 100%, height as 100vh, display as flex, justify-content as center, align-items as center, and background as #1355f6. The button container is given height and a width of 350px. The list items are given the styles of font-family as "montserrat", font color as #1355f6, and cursor as pointer to get the hand cursor effect. The border-radius for the selected area in the button container is given as 35px. The support buttons are given a color of #e1f2fb, and font-size as 1.8rem, which take a transforming effect of scale (1.1). Source: https://codepen.io/dev_loop/pen/ExjPNva
This is an example of a Neuomorphic style card layout, designed using HTML, CSS, and Bootstrap framework 4. The images and icons have been imported to the code with their URLs. The body of the form is given the styles of background-color as #ebf5fc, and font-family as 'Rajdhani', sans-serif. The box container is given the styles of padding-top as 20px, padding-bottom as 20px, border-radius as 6px, background as #ebf5fc, box-shadow as inset 8px 8px 15px #D9E3EC, border as 1px solid #c3f9f3, and an animation of rotate-center 4s linear infinite both, which changes its box-shadow value to inset -2px -2px 5px white, inset 3px 3px 5px rgba(0, 0, 0, 0.1), in a hover event. The icon set box has the styles of border as 1px solid #cac8c8, and border-radius as 50% to get the circle shape. The card heading has the styles of text-align as center, text-transform as uppercase to convert the text to uppercase, padding-top and bottom as 20px, letter-spacing as 3px; font-weight as bold, color as #6b6aa0, and font-size as 18px. The subheading is given a font color of #635f82, whereas the heading name is given the color #99a9b5. Source: https://codepen.io/uiswarup/pen/poJoRaV
This is an example of a responsive email template with a basic customer receipt designed with HTML, CSS, and Bootstrap framework 4. An external CSS style sheet has been imported to the HTML code. The images and fonts are also imported to the code whereas the media queries have been used to increase the responsiveness of the form. The form is given a background color of #f5dbce. The receipt information is given a font color of #718096, whereas the customer information is given the styles of font-weight as 600; text-align as right; width as 50% and align as right. The styles for the information display form is set as background-color as #edf2f7, height as 2px, line-height as 2px, and font-size as 14px. The check-in and check-out lines are given the styles of color as #a0aec0; font-size as 10px, text-transform as uppercase to automatically convert to uppercase, and letter-spacing as 1px, whereas the date information lines have the styles of font-weight as 600, and color as #000000. The total value has the styles of font color as #68d391 and font-size as 20px. Source: https://codepen.io/maizzle/pen/zmjjyJ
This is an example of a full-screen slideshow with animations, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The images have been imported to the code with their URLs. JavaScript functions have been used to implement the switch slides function on “Previous” and “Next” buttons. The body of the form is given the styles of background as RGB(21, 32, 43), and font-family as sans-serif. The switch buttons are given the styles of margin as 1rem, background as rgba(255,255,255,0.2), height as 2rem, font color as #fff, border-radius as 1rem, and cursor as pointer to get the hand cursor effect. The slides are given the styles of font-size as 3rem, color as #fff, font-weight as bold, and text-shadow as 5px 5px 10px, with a transform value of scale(0.85), which changes to scale(1), when they are active. The first two slides are given different linear-gradient background colors, whereas the other two are given background pictures. The code blocks in the second slide are given different styles as well as the font family as Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace.Source. https://codepen.io/_marcba/pen/OJVJYaL
This is an example of a simple bootstrap login form, designed using HTML, CSS, and Bootstrap framework 4. The images are imported to the code with their URLs. The body is given the styles of background as rgba(241, 242, 246,1.0), and font-family as sans-serif. The signup section is given a style set of width as 1100px, and height as 500px, background as white, and box-shadow as 0px 0px 30px 20px rgba(0,0,0,.12). The color of the card header is set as color: rgba(164, 176, 190,1.0). The icon at the top is given the styles of height as 75px, width as 75px, line-height as 75px, border as 2px solid red, and border-radius as 50% to get the circle shape. The input field has the styles of width as 85%, padding-left as 20px, color as rgba(47, 53, 66,1.0), and font-size as 20px, whereas the Enter button is given the styles of height as 40px, width as 230px, border-radius as 75px, margin as 20px auto, background as rgba(255, 107, 129,1.0), and font color as white. Source: https://codepen.io/rickyeckhardt/full/dyoyooe
This is an example of a ticket cards layout form with hover effects, designed using CSS, HTML, 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 cards in an orderly manner, whereas the media queries are used to increase the responsiveness of the form. The colors are predefined as $blue: #0a4870, $blue2 : #e3ebf1, $black: #000, $grey : #7d7d7d, $grey2 : #f0f0f0, $grey3 : #e8e7e7, $grey4 : #fdfdfd, $bluegrey : #49606e, and $orange: #ec992c. The form is given a font family as 'Sofia', sans-serif. The card title is given the styles of color as #0a4870, and font-weight as 500. The ticket card is given a background color as $blue, and a transition as .3s. The Reserve button is given the styles of text-transform as uppercase to convert the text to uppercase, font-weight as bold, font-size as 1.3em, color as white, and cursor as pointer to get the hand cursor effect, which takes the styles of background as white, border as 0px solid white, and color as $blue, in a hover event. Source: https://codepen.io/RemiRuc/pen/PowrNmb
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter