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 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