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 bootstrap card view, designed using HTML, CSS, and bootstrap framework 4. Fonts and images are imported to the code with their URLs. The web form is given the styles of font-family as "Montserrat", sans-serif, background color of #8d97ad, and font-weight as 300. The h1 to h6 sections are given a color of #3e4555 and a font-weight of 500. The background color of the form is set as #f4f8fa, whereas the subtitle is given the styles of color as #8d97ad, and line-height as 24px. The profile pic image is given a min-height of 200px. The concept of Lists has been used with the LI component to display the details in an orderly manner. In a hover event, the profile pic takes a transform effect of translate3d (0px, -5px, 0px) with a transition of 0.1s ease-in, to change the color to rgba(26, 139, 243, 0.87).
This is another template for a bootstrap testimonials web form, designed using HTML, CSS, and bootstrap framework 4. Bootstrap styles, fonts, icons, and images are imported to the code with their URLs. Media queries have been used to make the form responsive. The web form is given the styles of font-family as "Montserrat", sans-serif, background color of #8d97ad, and font-weight as 300. The h1 to h6 sections are given a color of #3e4555 and a font-weight of 500. The name of the person is given the styles of line-height as 22px, and font-size as 18px in CSS and text style as uppercase in HTML, whereas the subtitle is given the styles of color as #8d97ad, line-height as 24px, and font-size as 16px. The toggle buttons have the styles of border-radius as 0px, and margin as 8px -2px 8px 0, which change to background: transparent, color: #8d97ad, and border-right: 3px solid #2cdd9b, when they're active. The toggle button image is given a width of 70px, and an opacity of 0.5, which change to opacity: 1, when they're active.
This is another template for a bootstrap testimonials web form with a carousel feature, designed using HTML, CSS, JavaScript, and bootstrap framework 4. JavaScript functions have been used to implement the carousel effect. Bootstrap styles, fonts, icons, and images are imported to the code with their URLs. Media queries have been used to make the form responsive. The web form is given the styles of font-family as "Montserrat", sans-serif, background color of #8d97ad, and font-weight as 300. The h1 to h6 sections are given a color of #3e4555 and a font-weight of 500. The background color of the form is set as #f4f8fa, whereas the subtitle is given the styles of color as #8d97ad, and line-height as 24px. The text style of the title is set to uppercase in HTML to automatically convert the text to uppercase. The inner card is given the background color #188ef4 and also the linear gradient color of that, for the browsers that support linear gradient colors. The owl dots are given the styles of background as transparent, color as #8d97ad, font-size as 34px, and it changes its color to #263238, in a hover event.
This is another template for a bootstrap testimonials web form with a video carousel feature, designed using HTML, CSS, JavaScript, and bootstrap framework 4. JavaScript functions have been used to implement the carousel effect. Bootstrap styles, fonts, icons, and images are imported to the code with their URLs. The web form is given the styles of font-family as "Montserrat", sans-serif, background color of #8d97ad, and font-weight as 300. The h1 to h6 sections are given a color of #3e4555. The name of the person is given the styles of line-height as 22px, and font-size as 18px, whereas the font-size of the title is set to 13px. The subtitle is given the styles of color as #8d97ad, line-height as 24px, and the play icon is given the styles of font-size as 34px, and color as #ffffff. Owl dots have been used to control carousel function, with their styles set to border-radius as 100%, width as 70px, height as 70px, background-size as cover, margin-right as10px, and cursor as pointer to get the hand pointer effect. The owl dot changes its opacity to 1 from 0.4, in a hover effect.
This is another example of a bootstrap testimonials web form with a carousel feature, designed using HTML, CSS, JavaScript, and bootstrap framework 4. JavaScript functions have been used to implement the carousel effect. Bootstrap styles, fonts, icons, and images are imported to the code with their URLs. The web form is given the styles of font-family as "Montserrat", sans-serif, background color of #8d97ad, and font-weight as 300. The h1 to h6 sections are given a color of #3e4555 and a font-weight of 500. The background color of the form is set as #f4f8fa. The testimonial text has the styles of line-height: 30px, and font-size: 18px, whereas the client title is given the font-size 13px. The owl dots have been used to control carousel function, and given the color #188ef4 to be activated in a hover event. A divider has been used to divide content between the page description and the testimonials, with the styles of height as 2px, and width as 40px.
This is an example of a full-width bootstrap testimonials web form with a carousel feature, designed using HTML, CSS, JavaScript, and bootstrap framework 4. JavaScript functions have been used to implement the carousel effect. Bootstrap styles, fonts, icons, and images are imported to the code with their URLs. The web form is given the styles of font-family as "Montserrat", sans-serif, background color of #8d97ad, and font-weight as 300. The h1 to h6 sections are given a color of #3e4555 and a font-weight of 500, whereas the subtitle is given the styles of color: #8d97ad, and line-height: 24px. Media queries have been used to make the form responsive. The testimonial text has the styles of line-height: 40px, and font-size: 24px, whereas the testimonial container is given the styles of max-width: 800px, width: 100%, and padding: 60px. The background of the form is set to a linear gradient color and basic color of #2cdd9b, for the browsers that do not support linear gradient colors.
This is another example of a simple bootstrap contact us web form with placeholders and a button, designed using HTML, CSS, and bootstrap framework 4. Fonts, icons, and images are imported to the code with their URLs. The web form is given the styles of font-family as "Montserrat", sans-serif, color as #8d97ad, font-weight as 300, padding as 60px 0, margin-bottom as 170px, and background-position as center top. The h1 to h6 sections are given a color of #3e4555 and a font-weight of 500, whereas the subtitle is given the styles of color: #8d97ad, and line-height: 24px. The submit now details button is given a linear gradient color based on #ff4d7e, which switches color between #ff4d7e and #ff6a5b in a hover event. The text color for the social media icons is set as white and the border is set as white rounded circle, in HTML. They are also given the CSS styles of background: transparent, margin: 0 7px, and padding: 11px 12px.
This is an example of a simple bootstrap contact us web form with placeholders and a button, designed using HTML, CSS, and bootstrap framework 4. Fonts, icons, and images are imported to the code with their URLs. The web form is given the styles of font-family as "Montserrat", sans-serif, background color of #8d97ad, and font-weight as 300. The h1 to h6 sections are given a color of #3e4555 and a font-weight of 500. The submit button is given the color #ff4d7e, and also the linear gradient color of that, for the browsers that support linear gradient colors. In a hover event, the color of the button switch between #ff4d7e and #ff6a5b. The font-weight style for the placeholders is given as medium. The text inside the submit button is set to be centered.
This is an example of a bootstrap contact form with a map, designed using CSS and HTML. Fonts and the map are imported to the code with their URLs. Media queries have been used to make the form responsive. The web form is given the styles of font-family as "Montserrat", sans-serif, color as #8d97ad, and font-weight as 300. The text color of the title and placeholders are set as white in HTML. The h1-h6 sections are given a color of #3e4555, and a font-weight of 500, whereas the placeholders are given a border color of #ffffff, to be activated in a focus event. The background color of the container is set to #188ef4. The color of the text in the submit button is set as #3e4555 where the text inside is set to be centered, and the map is given a width of 100% and a height of 538.
This is a sample newsletter form with slide animations designed using HTML, CSS, and JavaScript. CSS style background image has been used to add the background image by providing the URL of the image. JavaScript is used to implement the click event for the given elements. Initially, the Subscribe button is hidden by adding the CSS style “display” with its value set to none. The fade-in and fadeout functions in JavaScript have been used to trigger the click event “Skip NewsLetter sub” and the slide-up and slide-down functions to display the slide animations in this example. Source: https://codepen.io/perikan/pen/pXNdxX
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter