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 modal box designed using HTML, CSS, and JavaScript. JavaScript functions have been used to implement the responsive features of the modal box. The font family is added as "Roboto", sans-serif, and the font-weight is set as normal. The background color of the body is set to #B0BEC5. The header of the model has the styles of padding as 20px 40px, background as #546E7A, and color as #ffffff whereas the modal body is given the styles of background as #ECEFF1, and padding as 60px 40px. The cursor is set as pointer to display the hand cursor. The modal box is given the animation styles of animation-duration: .4s, and animation-timing-function: cubic-bezier(0,0,.3,1.6). The modal trigger button has the style set of top and left as 50%, padding: 20px 40px, background: transparent, color: #ffffff, and border: 1px solid #ffffff.
This is an example of a combination of bootstrap accordion and bootstrap table, designed using HTML. The Bootstrap accordion is a component that organizes content within collapsible items, allowing the display of only one collapsed item at a time. A link has been imported to the code to access a more detailed document. The float buttons have been given a drop-down list. Also, the cards are provided with checkboxes and collapsible descriptions.
This is a template of a bootstrap audio/ music player, designed using CSS, HTML, and JavaScript. The image has been added to the form with its image URLs imported to the code. The music file is also added with its URL imported to the code. JavaScript functions have been used to implement the audio player functions in the form. Several background styles have been added according to the browser type Chrome, Safari, Opera, etc. The card has been added with the styles of border-radius as 10px, and cursor as pointer to display the hand cursor. The play head has the styles of height and width as 8px, border-radius as 50px, and background as black.
This is an example of a bootstrap survey form which includes buttons and radio buttons, designed using HTML and CSS. The radio buttons in the same group are given the same name to avoid selecting multiple buttons at the same time. There are five types of radio buttons; Very Good, Good, Mediocre, Bad, and Very Bad which are assigned its color code. Very Good buttons are given a background and a border color of #2e7d32, Good are given a border and a background color of #64dd17, Mediocre are given a color of #ffea00, Bad are given the color of #ff9800 whereas Very Bad are given the background and border color of #d50000.
This is a template of a web form with bootstrap grid list with scroll bar, without scrollbar, and smooth scroll options, designed using CSS, and HTML. The images have been added to the form with their image URLs imported. The last scroll bar has the styles of border-radius as 10px, webkit-box-shadow as inset 0 0 6px rgba(0, 0, 0, 0.1), background-image as -webkit-linear-gradient(330deg, #f093fb 0%, #f5576c 100%), and background-image as linear-gradient(120deg, #f093fb 0%, #f5576c 100%).
This is another example of a card layout web form with chips inside the cards, designed using CSS and HTML. The images and videos have been added to the form with their URLs imported. The background color of #eee is added to the body. There are three cards in the form named as booking card, sunny card, and the news card which are given different colors and styles. The sunny card is given a background color of #feffdf whereas its title and subtitle are given a color of #ffa952. Its logo is given the color of #ef5a5a, where the other chips are given the colors of #ffe79a, #ef5a5a, and #ffa952 respectively. The background color of the floating button is given as #ef5a5a. The news card is given the styles of background-color: #0b032d, and color: #ffb997. The input text field of the news card has the styles of box-shadow: 0 1px 0 0 #ffb997, and border-bottom: 1px solid #ffb997. Finally, the booking card is given a background color of #c7f2e3 and a text color of #db2d43.
This is a simple example of a card layout web form, designed using CSS and HTML. The images have been added to the form with their image URLs imported. The styles are added according to the shapes of the polygon in the cards. An initial filter of drop shadow(5px 5px 15px #388BDF) is added to the cards. The clip-blue-polygon initially has the styles of top as -0.3125rem, left as -0.1875rem, background as linear-gradient(125deg, #3787DA, #388BDF, rgb(80, 52, 134), #573E8A), clip-path as polygon(0 0, 100% 0%, 71% 100%, 0% 100%), and border-radius as .75rem. The clip-smaller-polygon also has the same initial style set except for the clip-path: polygon(0 0, 30% 0%, 71% 100%, 0% 100%). Clip-mirror-polygon is given the styles of transform: scaleX(-1), top:-0.3125rem, left:-15rem, background: linear-gradient(125deg, #3787DA, #388BDF, rgb(80, 52, 134), #573E8A), clip-path: polygon(0 0, 30% 0%, 71% 100%, 0% 100%), and border-radius: .75rem. A sheen effect is added to the last polygon with the style animation: sheening 1s forwards.

MDB cards

4.3.1
This is an example of a web form with a responsive avatar card layout, designed using HTML, JavaScript, and CSS. The images have been added to the form with their image URLs imported. JavaScript functions have been used to implement the responsive animations on the avatar cards. The body of the form is given a background color of #08202B and the overflow-x property is set as hidden clip the content. Two navigational links: Directors and Contact have been given the styles of font-family as 'GTAmericaExpanded', sans-serif, font-size as 2.4rem, color as #fff, font-weight as 900, line-height as 1.2em text-transform as uppercase to automatically convert the text to uppercase, and cursor as pointer to display the hand cursor. The avatar module has the styles of width: 100%, position: absolute, top: 50%, left: 50%, and transform: translate(-50%,-50%) whereas avatar name is given the styles of width: 100%, font-family: 'GTAmericaExpanded',sans-serif, font-size: 1.2rem, color: #fff, font-weight: 800, text-align: center, transform: translateY(-50%), and transition: all 0.2s.
This is a template of a bootstrap tour of a web form with a navigational bar, buttons, cascading cards with social media links, and a card image gallery, designed using HTML, CSS, and JavaScript. The collapsible navigation bar is added with a dropdown list and a search bar. The bootstrap tour function is implemented using JavaScript functions. The show and hide methods of the JavaScript popover function have been used to hide and show the popup box. The images have been added to the form with their image URLs imported and the Li element of lists has been used to display the items in a list. The gallery is given an initial style set of column count as 3 (webkit-column-count: 3, moz-column-count: 3), column width as 33% (webkit-column-width: 33%, moz-column-width: 33%), transition as all 350ms ease, and animation as 1(webkit-transform: scale(1), ms-transform: scale(1)).
This is a template of a signup form layout, designed with CSS, HTML, and JavaScript. The toggle class of JavaScript has been used to toggle between adding and removing one or more class names. The logo has been added to the form with its image URL imported. The signup card has the styles of border as 1px solid #dadce0 and border-radius as .5rem whereas the logo has the styles of width: 75px, height: auto, margin-bottom: 1rem. The slogan is given the styles of color: #3c4043, font-weight: 500, and font-size: .875rem. The signup button is given the styles of border-width: 1px, font-weight: 500, font-size: .785rem, border-radius: .25rem and border-color: #dadce0 where it changes the style to background-color: #f6f9fe, and border-color: #d2e3fc in a hover event and background-color to #e4eefd, and border-color to #d2e3fc in a clicked event. The border color of the input fields also changes to #4285f4 in a clicked event.
This is an example of a web form with a rotating card with description, designed using HTML, CSS, and JavaScript. Links to social media pages are also added to the bottom of the card. The Li element of lists has been used to display the social media icons in a list. JavaScript has been used to implement the flip function of the card with transform and box-shadow styles added. The images have been added to the code with their URLs. The body of the form is given a background color of rgb(255, 255, 255). The flip of the card has the styles of width: 100%, height: 350px, transform-style: preserve-3d, and transition: all 0.4s ease. CSS styles are added to the card section-wise as front, back, text area, top, top. header avatar, name, back.header, card link button, and the card links. A box-shadow effect of 0px 1px 10px -2px rgba(0,0,0,0.43) added to the card in a hover event.
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter