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 login form with Facebook and Google sign-in links, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The icons, background image, and the card image are imported to the code with their URLs. JavaScript functions are used to implement the click functions of the input text fields. The form container has the styles of width as 450px, height as 550px, background-color as white, top as 50px, left as 35%, box-shadow a 0 0 20px black, and border-radius as 8px. The card image is given a width of 50px, and a height of 150px. The text of the form is given the styles of font-size as 25px, font-family as 'Roboto Slab', serif, text-alignment as center, and position as relative. The font-size of the input text fields are set to 20px, with the margin-bottom style set as 15px. In a hover event, the background color of the input fields turns to gainsboro, whereas in a focus event, the fields take a box shadow effect of 0 0 10px green. The cursor style for the login button is set as pointer to get the hand cursor effect. The Facebook and Google sign-in buttons also take their respective colors as their background color, in a hover event. Source: https://bbbootstrap.com/snippets/login-form-facebook-and-google-link-26654961
This is an example of a testimonial carousel slider, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The testimonial images are imported to the code with their URLs. Media quarries have been used to increase the responsiveness of the form, whereas JavaScript functions are used to implement the carousel slider functions. The number of cards per slide is defined as 4 in JavaScript functions. The body of the form is given a background color of #4A148C. The testimonial card is given the styles of position as relative, display as flex, width as 600px, flex-direction as column, background-color as #fff, background-clip as border-box, border as 1px solid #d2d2dc, border-radius as 11px, and box-shadow as 0px 0px 5px 0px RGB(161, 163, 164). The card title has the styles of font-size as 19px, and font-weight as 200. The card content section has the styles of font-size as 0.875rem, margin-bottom as .5rem, and line-height as 1.5rem. Source: https://bbbootstrap.com/snippets/testimonial-carousel-slider-autoplay-24183189
This is an example of a product carousel for an e-commerce shopping cart, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The product images, CSS styles, and font styles are imported to the code with their URLs. JavaScript functions are used to implement the carousel function of the slider. Media quarries have been used to increase the responsiveness of the form. The body of the form is given the styles of font-family as 'Rubik', sans-serif, font-size as 14px, font-weight as 400, background as #eee, and color as #000000. The subtitle of the form is given the styles of font-size as 14px, line-height as 1.7, font-weight as 400, color as #828282, and text-shadow as rgba(0, 0, 0, .01) 0 0 1px. The product prices have the styles of font-size as 16px, and font-weight as 500. The product name and link are given a font-size as 16px, and font color as #000000, which takes a font color of #0e8ce4. Source: https://webdesignerwall.com/create-snippet?snippet_id=8956
This is an example of a payment form with an input mask, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The payment options images are imported to the code with their URLs. JavaScript functions have been used to implement the date format, number format, and the radio button active status in the input fields. The body of the form is given a background color of #000000. The left side card is given a background color of #263238, and height as 100%. The font-size of the bill value is set as 30px. The bill dates are displayed in a #BDBDBD font color. The payment method radio buttons are given a height of 64, width of 204, border value of 2px solid light grey, and cursor style as pointer to get the hand cursor effect. The radio buttons take a box-shadow effect of 0px 0px 0px 1px rgba(0, 0, 0, 0.2) in a hover event and a box-shadow effect of 0px 0px 0px 1px rgba(0, 0, 0, 0.4), in a focus event. Source: https://bbbootstrap.com/snippets/payment-form-input-mask-20478269
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter