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 FAQ accordion web form with collapse and expand effects, designed using HTML, JavaScript, and CSS. Bootstrap style sheets including the fonts and icons are imported to the form with their URLs. The background color of the body is set to #fff. The page title has the styles of padding as 3rem 0 3rem 1rem, background color of #73bb2b, and font-family as "Roboto", sans-serif. The card header button is given the styles of color as #2f2f31, font-size as 1.04rem, text-align as left, position as relative, font-weight as 500, and padding-left as 2rem. The card header takes the color of #ff8300, in a hover event. The card body is given the background color of #324353. JavaScript functions have been used to implement add minus icon for collapse element which is open by default and Highlight open collapsed element effects. The open collapsed element gets a highlighted effect of #74bd30 color.
This is an example of bootstrap contact us web form with a gradient background, designed using HTML, and CSS. Bootstrap style sheets including the fonts and icons are imported to the form with their URLs. The body of the form is given the styles of font-family as "Varela Round", sans-serif, linear-gradient background color of linear-gradient(#ff9968, #ff5e63), and a color of #ff5e63 for browsers that don't support linear gradient colors. The header title is given the styles of text-align as center, font-size as 50px, and margin as 0 0 15px whereas the hint text quote has the styles of font-size as 15px, text-align as center, padding-bottom as 25px, and opacity as 0.8. The styles for the "send message" button is set as background: #a177ff, font-size: 16px, and min-height: 50px. In a hover event, the color of the button changes to #8048ff.
This is a template for a classic bootstrap newsletter signup web form, designed using HTML, CSS, and JavaScript. JavaScript functions have been used to implement displaying functions. Bootstrap style sheets including the fonts and icons are imported to the form with their URLs. The body of the form is given the styles of font-family as 'Open Sans', sans-serif, color as #9f9f9f, and a font-size of 15px. The header title is given he styles of color as #000, text-align as center, font-family as 'Raleway', sans-serif, font-weight as 800, font-size as 30px, and text-transform as uppercase to convert the text to uppercase automatically. The close button on top is given a font-size of 26px, the color of #c0c3c8, opacity of 0.5, which changes to 0.8 in a hover event. The subscribe button has the styles of color as #fff, background as #353535, transition as all 0.4s, and text-transform as uppercase, which changes its color to #171717 in a hover event. The "No thanks" button also changes its border from 2px solid to none, in a hover event.
This is another template for a bootstrap subscribe newsletter web form inside modal, designed using HTML, CSS, and JavaScript. JavaScript functions have been used to implement displaying functions. Bootstrap style sheets including the fonts and icons are imported to the form with their URLs. The body of the form is given a font-family of 'Varela Round', sans-serif whereas the form is given the styles color as #999, width as 625px, and font-size as 15px. The header title is given the styles of color as #000, font-size as 30px, and font-weight as bold. The close button on top is given a font-size of 24px, and opacity of 0.5, which changes to 0.8 in a hover event. The subscribe button is given the styles of color as #fff, background as #f95858; transition as all 0.4s, line-height as normal, padding as 6px 20px, and min-width as 150px. In a hover event, the color of the button changes to #f72222.
This is a template for a bootstrap subscribe newsletter web form inside modal, designed using HTML, CSS, and JavaScript. JavaScript functions have been used to implement displaying functions. Bootstrap style sheets including the fonts and icons are imported to the form with their URLs. The body of the form is given a font-family of 'Varela Round', sans-serif whereas the form is given the styles color as #999, and font-size as 15px. The header title is given a style set of color as #000, text-align as center, font-size as 30px, margin as 0 0 25px, font-weight as bold, and text-transform as capitalize to make the first letter of each word capital. The close button on top is given a color of #c0c3c8, and an opacity of 0.5, which changes to 0.8 in a hover event. The color of the icon is set as #7265ea whereas the subscribe button has the styles of color as #fff, border-radius as 4px, background as #7265ea, and transition as all 0.4s. The background color of the icon changes to #4e3de4 in a hover event.
This is an example of a bootstrap web form with an error message, designed using HTML, and CSS. Bootstrap style sheets including the fonts are imported to the form with their URLs. The body of the form is given a font-family of 'Varela Round', sans-serif, a color of #434e65, and a width of 525px. The header section is given the color #e85e6c, text-align as center, margin as -20px -20px 0, and border radius as 5px 5px 0 0. The text-align for the header text is set as center and font-size as 36px. The close button on top is given a color of #fff and opacity of 0.5, which changes into 0.8 in a hover event. The try again button has the styles of color as #fff, border-radius as 4px, background as #eeb711, transition as all 0.4s, line-height as normal, border-radius as 30px, margin-top as 10px, padding as 6px 20px, and min-width as 150px. The button changes its color to #eda645 in a hover event.
This is an example of a web form with an all in one navigational bar, designed suing HTML, and CSS. 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. Bootstrap style sheets including the fonts and images are imported to the form with their URLs. The body of the form is given a background color of #eeeeee. The navigational bar is given the styles of background as #fff, padding-left as 16px, padding-right as 16px, border-bottom as 1px solid #d6d6d6, and box-shadow as 0 0 4px rgba(0,0,0,.1). The profile image is given the styles of border-radius as 50% to make it circular shaped, width as36px, height as 36px, margin as -8px 0, float as left, and margin-right as 10px. The navigational bar brand name has the styles of color as #555, and font-family as 'Merienda One', sans-serif whereas the notifications and messages badges are given a background color of #f44336, font-size of 11px, and border-radius of 20px.
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter