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 simple bootstrap profile layout, designed using HTML, CSS, and bootstrap framework 4. The images, fonts, and icons are imported to the code with their URLs. The font family style for the form is set as 'Open Sans', sans-serif, whereas the form is given a background color of #009688, a width and a height of 100%, and the font-size as 16px. The profile card is given a style set of border-radius as 3px, background color as white, box-shadow as 0px 10px 20px rgba (0,0,0,0.2), whereas the content section of the card has the styles of width as 190px, and height as 300px, and background as cadetblue. The badges section is given the styles of background as #ECECEC, border-radius as 3px, and width as 480px. The image is given a border-radius of 50% to get the circular shape, whereas the name and designation headers are given a font-sizes of 1.8em, and 1.2em, respectively with the text style: Italic is given to the designation. CSS @keyframes is used to implement the animations in CSS. The profile card is given an appear animation effect of rotatemagic 0.75s cubic-bezier(0.425, 1.040, 0.470, 1.105) 1s both. Source: https://codepen.io/kartikag1/pen/jOEewev
This is an example of a bootstrap grid layout used to display thumbnail details with hover effects, designed using CSS, HTML, and Bootstrap framework 4. The background images of the cards are imported to the code with their URLs. The number of grid items per row is defined as 3, and the gap between each item is set as 1, in CSS. The colors are predefined as primary-color: #333, secondary-color: #fff, and font-color: #fff. For the browser that does not support the grid layout, the background color is set as #00d2ff. The font family for the form is given as 'Roboto', sans-serif. The title of the form is given a style set of color as white, font-size as 30px, text-transform as uppercase to automatically convert the text to uppercase, and font-weight as 700, whereas the subtitle of the form is given the styles of font-size as 18px, and font-weight as 300. In a hover effect, the first card takes a transform effect of transformSkewScale (-45deg, 1), and a transition effect of (all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275)), whereas the second and third ones take transformSkewScale(45deg, 1), and transformSkewScale(45deg, 0) effects, respectively. Source: https://codepen.io/nikhil8krishnan/pen/jbdXdr
This is an example of a web form with a 3D fold-out reveal card preview, designed using HTML, CSS, and JavaScript. The background images of the cards are imported to the code with their URLs. JavaScript functions have been used to create 3D animations in a focused event. The font family of the form is set as Sans+Pro and imported into the code with its URL. The colors are predefined as variables and set as white: #ffffff, lightBG: #dce1df, salmon: #ff6666, teal: #0096a0, tealMid: #0ebac7, tealContrast: #33ffff, darkGrey: #4f585e, and tealShade: #007c85. The body of the form is given the styles of background: @lightBG, color: @darkGrey, font-family: 'Source Sans Pro', sans-serif, and text-rendering: optimizeLegibility. The cards are given an initial set of styles such as background: @white, display: inline-block, margin: 8px, max-width: 300px, perspective: 1000, position: relative, text-align: left, and transition: all 0.3s 0s ease-in. The cursor is set as pointer to display the cursor as a hand, in a focus event on cards. Source: https://codepen.io/candroo/pen/wKEwRL
This is an example of a web form where the CSS grid is used as a mask to create a poster. It is designed using CSS, HTML, and Bootstrap framework 4. The CSS grid is displayed in 14 rows, which are defined in HTML. The background image is imported to the code with its URL. The background color of the HTML form is given as #124559, with the background-size set as 100vw. The body of the form is given a style set of font-family as 'Roboto Slab', serif, font-size as1.8vw, and color as #D3E6D9. The name of the person is displayed with the styles font-family as 'Rozha One', serif, position as relative, and font-size as 5vw. The items in the grid are left partially transparent to expose areas of the background image by changing the placement of the grid rows and columns with changing the value of grid-column-end: span and grid-row-end: span. The images and bootstrap styles are imported to the code with their URLs. Source: https://codepen.io/andybarefoot/pen/wrXvLj
This is an example of a vault layout web form designed using CSS and HTML. CSS grid view elements have been used to separate and organize the displaying sections whereas Flexbox is used to get an identical layout for the browsers that don't support the CSS grid. 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 unordered list. The default font size for the form is set to 10px. The body is given the style set of font-family as "Open Sans", Arial, sans-serif, display as flex, min-height as 100vh, background-color as #fafafa, and position as relative whereas the buttons are given the styles of font-size as inherit, font-weight as inherit, color as inherit, display as flex, justify-content as center, align-items as center, and cursor as pointer to display the cursor as a hand. The header is given a background color of #d12f2e and the search input field is given a color of rgba(255, 255, 255, 0.3) in a hover event. Source: https://codepen.io/GeorgePark/pen/PQweLr
This is an example of a website header with a bootstrap carousel, designed using HTML, CSS< JavaScript and Bootstrap framework 4. The images and bootstrap styles are imported to the code with their URLs, whereas JavaScript had been used to implement carousel features. 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. Media queries have been used to increase the responsiveness of the form. The nav-bar is given the styles of font-family as Verdana, color as #ffffff, and font-size as 20px. The background color for the nav-bar is set as transparent to make the menu transparent. The carousel image is given a linear gradient background color of linear-gradient ( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), and a transform effect of translate3d(0, 0, 0). The title is given a font-weight of 600, and a font-size of 60px, whereas the subtitle is given a font-size of 23px. The explore button is given the background color #FF4000. Source: https://codepen.io/arian-atapour/pen/xxbYxGW
This is an example of a bootstrap web form with an image carousel with swipe functionality, 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 swipe feature had been implemented in JavaScript. The concept of Lists has been used with the LI component to display the items in an orderly manner. The body of the form is given a height of 100%. The carousel indicators are given a background color of #E9E9E9, transition of (all 0.3s ease), and transform of scale(1), which changes its background color to #FFFFFF and take a transform effect of scale(1.3), in a hover event. Carousel item is given a height of 800px, whereas the image is given the styles of width and height as 100%. Source: https://codepen.io/cliero/pen/oNgEjKK
This is an example of a bootstrap web form with an image carousel, designed using 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 in CSS itself. 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. The body of the form is given a background color of #000, whereas the color of the title is set as #7CFC00. Carousel items are given a style set of border-color as transparent, border-radius as 3px, box-shadow as 0 0 20px 0 #7CFC00, cursor as pointer to get the hand cursor effect, a transform effect as scale(1.5), transition-delay as 0, transition effect as all .34s linear, and z-index as 2. The height and the margin for the carousel are set as 392px, and 12px, respectively. Source: https://codepen.io/cliero/pen/rNaJxVq
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
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter