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 web form with a looping Instagram feed carousel, designed using JavaScript, CSS, bootstrap framework 4 and HTML. The images, fonts and bootstrap styles are imported to the code with their URLs, whereas the carousel feature had been implemented using JavaScript. Media queries have been used to increase the responsiveness of the form. The body of the form is given a style set of width as 100vw, height as 100vh, overflow as hidden, font-family as 'Dosis', sans-serif, background-color as black, and color as white. The autoplay mode, arrows, and center mode values are set as true in JavaScript with the autoplay speed set as 3000ms, and the slides to show value set as 5. A text-transform style for the indicator buttons is set as uppercase to automatically convert to uppercase with the cursor style set as pointer to get the hand cursor effect. The image item is given the styles of width as 100%, filter as blur(6px), transform effect as rotate(0) translate3d(0, 0, 0), and transition effect of filter 0.8s *2. Source: https://codepen.io/martampoule/pen/oNgEzVz
This is an example of a bootstrap web form with a swiper slider, designed using JavaScript, CSS, bootstrap framework 4 and HTML. The images and bootstrap styles are imported to the code with their URLs, whereas the swiper feature had been implemented using JavaScript. The swiper is given the styles of background-size as cover, background-position as 50%, min-height as 80vh, display as flex, align-items as center, justify-content as center, and flex-direction as column. The pagination dots are given the styles of background-color as transparent, border as 2px solid #fff, border-radius as 50% to get the circle shape, width as 12px, height as 12px, and opacity as 1. When the dots are active, they take the background-color #fff. The swiper buttons are given the background color as rgba(0,0,0,.25). The loop value is set as true in JavaScript to run the swiper in a loop. Source: https://codepen.io/shivam1192/pen/BayYQoP

Swiper

4.3.1
This is an example of a bootstrap web form with a vertical carousel feature designed using Tweenmax JavaScript library, CSS, bootstrap framework 4 and HTML. The images and bootstrap styles are imported to the code with their URLs, whereas the carousel feature had been implemented using JavaScript. The body of the form is given a height and a width of 100%, a linear gradient background color as linear-gradient(180deg, #ffb253 0%, #f56259 100%). The card image has the styles of width as 53px, height as 53px, and border-radius as 50% to get the circle shape. The card content section is given the styles of width as 100%, max-width as 374px, margin-left as 26px, and font-family as "Open Sans",sans-serif. The card title has the styles of color as #4a4545, font-size as 16px, font-weight as 400, letter-spacing as -.18px, and line-height as 24px, whereas the content description is given the styles of color as #696d74, font-size as 15px, font-weight as 300, and line-height as 24px.The city is given a font color of #696d74, and a font-size of 11px with the text-transform style set as uppercase to automatically convert the text to uppercase. Source: https://codepen.io/rahulsingha/pen/mdyXzzj
This is an example of a bootstrap web form with image carousel feature with indicator buttons, designed using JavaScript, CSS, bootstrap framework 4 and HTML. The images and bootstrap styles are imported to the code with their URLs, whereas the carousel feature had been implemented using JavaScript. The body of the form is given a height and a width value of 100%, whereas the carousel is given a height as 400px, top as 50%, and a transform effect of translateY(-50%). The indicator buttons are given a style set of position as fixed, left as 50%, transform as translateX (-50%), and bottom as 10px. The carousel items have been named separately and given styles accordingly. The hideLeft item is given a transform as translateY(50%) translateX(-50%), opacity as 0, and image width as 200px, prevLeftSecond is given transform as translateY(50%) translateX(-50%), opacity as .7, and image width as 200px, prev is given transform as translateY(50px) translateX(-50%), image width as 300px, selected is given transform as translateY(0px) translateX(-50%), next is given transform as translateY(50px) translateX(-50%), and image width as 300px, nextRightSecond is given transform as translateY(50%) translateX(-50%), opacity as .7, image width as 200px, and hideRight is given transform as translateY(50%) translateX(-50%), and image width as 200px. Source: https://codepen.io/aminos92/pen/YzPeRLM

Carousel

4.3.1
This is an example of a bootstrap web form with an image carousel feature, designed using JavaScript, CSS, bootstrap framework 4 and HTML. The images and bootstrap styles are imported to the code with their URLs, whereas the carousel feature had been implemented using JavaScript. The body of the form is given a background color of #eaeaea and height and width as 100%. The carousel is given a max-width and a max-height of 900px, and 550px. Carousel item image has the styles of width as 60%, height as 100%, align-self as flex-end, transform as translateX (100%), and transition as 0.6s all ease-in-out. The title of the item has the styles of margin as 15px 0 0 0, font-family as 'Playfair Display', serif, font-size as 44px, line-height as 45px, letter-spacing as 3px, font-weight as 700, color as #2C2C2C, transform as translateY(25%), and a transition of 0.6s all ease-in-out. The subtitle of the item is again given a style set of font-family as 'Open Sans', sans-serif, letter-spacing as 3px, font-size as 10px, text-transform as uppercase to automatically convert the text to uppercase, color as #7E7E7E, font-weight as 700, transform as translateY(25%), and transition as 0.4s all ease-in-out. The cursor style is set as pointer for the arrow button to get the hand cursor effect. Source: https://codepen.io/Jpozo/pen/eYmMgPG
This is an example of a bootstrap web form with an OWL carousel feature with a cascading waterwheel effect, designed using JavaScript, CSS, bootstrap framework 4 and HTML. The images and bootstrap styles are imported to the code with their URLs, whereas the carousel feature had been implemented using JavaScript. Media queries have been used to increase the responsiveness of the form. The number of items per slide is defined as 5 in JavaScript with loop and center settings defined as true to get the carousel centered and move in a loop. The title of the card is given a style set of padding as 0px 15px, text-align as center, line-height as 26px, margin-top as 60px, font-size as 24px, and color as #fff. The background color of the carousel item is set as RGB(50,145,151), as well as its linear gradient color. The Play/Stop icon is given a style set of color as #fff, font-size as 20px, padding-top as 20px, text-align as center, and width as 60px. The carousel items are also given a transform effect of scale(0.7), and a transition effect of all .2s. Source: https://codepen.io/ms-soniasilva/pen/PowRmaB
This is an example of a bootstrap web form with the image carousel feature with a scrolling option, designed using JavaScript, CSS, bootstrap framework 4 and HTML. The images and bootstrap styles are imported to the code with their URLs, whereas the carousel feature had been implemented using JavaScript. The ability to scroll the carousel with the mouse wheel is set in JavaScript. The background of the form is given a style set of background as #111, font-family as "Comfortaa", sans-serif, and min-height as 100vh. The width and height for the card image are set as 17em, and 400px, respectively. The card image is also given the styles of margin as 40px 20px, min-width as 17em, scroll-snap-align as center, background as #f8f8f8, height as 400px, and border-radius as 20px. The font color for the title is set as #ccc, with the font style set to 900 100px/1 Muli. A text-transform style as uppercase is given to automatically convert the text to uppercase. The cursor style for image card is set as pointer to get the hand cursor effect in a hover event, as well as a box-shadow style of 0 0 30px rgba(255, 255, 255, 0.2). Source: https://codepen.io/reguia/pen/rNadwEJ
This is an example of a bootstrap web form with a simple slick slider carousel, designed using JavaScript, CSS, bootstrap framework 4 and HTML. The images and bootstrap styles are imported to the code with their URLs, whereas the carousel feature had been implemented using JavaScript. The body of the form is given a background color of #e74c3c, whereas the header is given the styles of font-family as sans-serif, and color as #fff. The carousel has the styles of width as 90%, whereas the slick slider is given a margin of 10px. Slider image is given the styles of width as 100%, and border as 2px solid #fff. Slider show dot indicators and arrow indicators are enabled in JavaScript, along with the autoplay mode and the autoplay speed set to 2000 milliseconds. Centre mode setting is also enabled in JavaScript to enable a centered view. Source: https://codepen.io/ahmetundemir/pen/VwYXrgg

Slick Slider

4.3.1
This is an example of a bootstrap web form with an image carousel, designed using JavaScript, CSS, bootstrap framework 4 and HTML. The images, fonts and bootstrap styles are imported to the code with their URLs, whereas the carousel feature had been implemented using JavaScript. The body of the form is given a style set of height as 100%, width as 100%, and background-color as #efefef. The carousel item description has the styles of transform as translate (25%), transition as 0.6s all ease-in-out, font-family as 'Open Sans', sans-serif, font-size as 16px, font-weight as 300, color as #7e7e7e, line-height as 1.5, margin as 0 0 1.5rem, and font-style as italic. The client name of the carousel item is also given the styles of font-family as 'Exo', sans-serif, font-weight as 700, font-size as 20px, font color as #e45323, and margin as 0 0 1rem. The carousel item image has the styles of width as 40%, height as 100%, transform as translateX (100%), transition as and 0.6s all ease-in-out. Source: https://codepen.io/thomastruett/pen/abzYQXY
This is an example of a bootstrap web form with a 3D carousel image slider, designed using JavaScript, CSS, bootstrap framework 4 and HTML. The images and bootstrap styles are imported to the code with their URLs, whereas the carousel feature had been implemented using JavaScript. The body of the form is given a style set of font as 18px 'Josefin Slab' Serif, background as rgba(238,244,248,1), and height as 100%. The name of the carousel item has the styles of padding as 1em, and background-color as #3c3c3c. Carousel item section is given the styles of color as white, and font-weight as bold. The carousel is given the styles of width as 50%, and height as 80%, transform-style as preserve-3d, and a transition effect of transform 0.5s. The carousel image is given a box-shadow style of 0px 27px 62px 0px rgba(0,0,0,0.5), and a border-radius of 0.2em. Source: https://codepen.io/brandonjdavis/pen/XWJEoOO
This is an example of a bootstrap web form with a carousel feature with 3D animations, designed using JavaScript, CSS, bootstrap framework 4 and HTML. The images and videos are imported to the code with their URLs, whereas the carousel feature had been implemented using JavaScript. CSS @keyframes is used to implement the animations in CSS. The body of the form is given a style set of overflow as hidden, display as flex, background as #111, perspective as 1000px, and a transform-style as preserve-3d. The spin container is given a transforming effect of rotate (-10deg). The carousel items are given a style set of position as absolute, width and height as 100%, line-height as 200px, font-size as 50px, box-shadow as 0 0 8px #fff, and box-reflect as below 10px linear-gradient(transparent, transparent, #0005). In a hover event, the items take a box-shadow effect of 0 0 15px #fffd, and a -box-reflect effect of below 10px linear-gradient(transparent, transparent, #0007). The header in the middle of the carousel is given a font-family style as Serif, and color as #fff. The auto-rotate option is set as true, and the rotation speed is defined as 60s in JavaScript, along with the radius of the carousel set as 240. Source: https://codepen.io/greggo/pen/BayrerV

3D carousel

4.3.1
This is an example of a bootstrap web form with a scrolling bootstrap card carousel, designed using JavaScript, CSS, bootstrap framework 4 and HTML. The images and bootstrap styles are imported to the code with their URLs, whereas the carousel feature had been implemented using JavaScript. Media queries have been used to increase the responsiveness of the form. The number of carousel items per slide has been defined as 3 in JavaScript. Each item has been given a bootstrap primary button. Position and visibility for the carousel items are set as relative and visible respectively, whereas a translate3d value had been given to the items according to their positions, to implement the carousel animations. Source: https://codepen.io/NatanOuaki/pen/zYxjOBg
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter