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 another restaurant food menu layout, designed using HTML, CSS, and Bootstrap framework 4. The fonts, Bootstrap and CSS styles are imported to the code with the URLs. The menu items are added to a table layout. The menu item description section is given the styles of padding-right as 5px, font-family as 'Roboto Condensed', sans-serif, font-weight as bold, text-align as left, font-size as 20px, display as table-cell, width as 10%, line-height as 15px, and text-align as left. The dotted line is given the styles of display as table-cell, width as 88%, and border-bottom as 1px dotted #000. The menu item names are added as links in HTML, to be redirected into an external page. The section of the menu item has the styles of text-align as left, font-size as 24px, color as #F44334, and font-weight as 600. Source: https://www.tolmatol.com/food-menu/
This is an example of a restaurant menu layout, designed using HTML, CSS, and Bootstrap framework 4. The fonts, CSS, and Bootstrap styles are imported to the code with their URLs. The item image is given the styles of width as 70px, border-radius as 50% to get the circle shape, and transition as all 0.3s. In a hover event, the image takes the styles of transform as translate(0,-4px), and box-shadow as 3px 4px 10px -5px #505050. The name line of the food item is given the styles of padding-top as 8px, font-family as 'Roboto Condensed', sans-serif, font-size as 21px, font color as #333333, and font-weight as 500. It takes the color of #e52233, in a hover event. The price section of the menu item is given the styles of padding-top as 8px, font-family as 'Roboto Condensed', sans-serif, font-size as 22px, color as #f44336, and font-weight as 600. Media queries are used to increase the responsiveness of the form. Source: https://www.tolmatol.com/restaurant-menu-design/
This is an example of a submission form with validation, designed using HTML, CSS, and Bootstrap framework 4. The fonts, CSS styles, and Bootstrap styles are imported to the code with their URLs. The body of the form is given the styles of font-size as 18px, and font-family as 'Poppins', sans-serif. The input fields are given the styles of position as relative, display as block, width as 100%, font-size as 14px, color as #bbbbbb, line-height as 20px, padding as 15px 28px, border as 1px solid #bbbbbb, background-color as #ffffff, font-weight as 400, border-radius as 25px, and transition as all 300ms ease. The input fields take a border-color of #ff7e00, in a focus event. The text area for the message field has the styles of height as 200px and padding-top as 25px. The Submit button is given the styles of text-transform as capitalize to make the first letter of each word uppercase, font-size as 14px, padding as 15px 50px, and line-height as 20px. Source: https://www.tolmatol.com/request-a-call-back/
This is an example of another pricing table layout, designed using HTML, CSS, and Bootstrap framework 4. The fonts, CSS, and Bootstrap styles are imported to the code with their URLs. 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 the styles of background as #f1f1f1, font-family as 'Poppins', sans-serif, and font-size as 16px. The price line is given the styles of font-size as 2.25rem, font-weight as 600, color as #ff3514, padding as 35px 15px 0, and display as inline-block, whereas the $ mark is given the styles of font-size as 50%, font color as #232323, and padding as 0 0 0 4px. The best seller card has the styles of background as #FFF, border-style as solid, border-width as 1px, border-color as rgb(255, 53, 20), and box-shadow as 0px 0px 52px 0px rgba(28, 28, 28, 0.09). The Sign up button is given a cursor style as pointer to get the hand cursor effect in a hover event, font-weight as 400, font-size as 0.875rem, and box-shadow as 0px 14px 47px 0px rgba(28, 28, 28, 0.24). Source: https://www.tolmatol.com/price-table-2/
This is an example of a pricing table layout, designed using HTML, CSS, and Bootstrap framework 4. Bootstrap styles and CSS styles are imported to the code with their URLs. The fonts, CSS, and Bootstrap styles are imported to the code with their URLs. 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 form is given a style set of padding as 20px 0px, position as relative, z-index as 10, background as #e6f8f9, and overflow as hidden. The pricing box is given the styles of padding as 40px, background as #fff, transition as all 0.2s ease, and position as relative, which takes the effect of box-shadow as 0 10px 30px 5px rgba(17,21,23,.1), in a hover event. The title of the price card is given a font-size of 30px, and a font-weight of 700, whereas the subtitle is given the styles of font-size as 18px, margin-top as 5px, font-family as 'Cardo', serif, and font-weight as 700. Source: https://www.tolmatol.com/price-table-3/
This is an example of a card layout with team profile details, designed using HTML, CSS, and Bootstrap framework 4. The images, fonts, CSS and Bootstrap styles are imported to the code with their URLs. The profile image is given the styles of width as 100%, transform as scale(1, 1), and transition as .5s. The images take a transform effect of scale(1.1, 1.1), to change the scale of the image, in a hover event. The name of the user profile is given a style set of font-size as 18px, text-transform as uppercase to automatically convert each letter of the word to uppercase, font-weight as 700, color as #333333, and transition as .5s. The designation text is given the styles of text-transform as uppercase, font-size as 14px, and font color as #797e82. In a hover event, the background color of the text section turns to #6f0ac8, whereas the font color of the text turns to #fff. The social media icons are given a background color as #6f0ac8, with the opacity set as 0, and the visibility set as hidden to hide when not active. In a hover event on the image, the opacity of the social media icons becomes 1 and the visibility turns to visible. Source: https://www.tolmatol.com/our-team-with-social/
This is an example of a subscription form with validation, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The fonts, CSS, and Bootstrap styles are imported to the code with their URLs. 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. JavaScript functions have been used to validate the name, email, and message details. The input fields of the form are given the styles of position as relative, display as block, width as 100%, font-size as 18px, color as #555555, line-height as 32px, padding as 15px 30px, border as 1px solid #f1f1f1, background-color as #f1f1f1, font-weight as 400, and height as 64px. The input fields take the border-color of #f20487, in a focus event. The text-area for the message section is given a height of 156px. The Submit button is given a text-transform style as capitalize to make the first letter of each word uppercase. Source: https://www.tolmatol.com/form-validation/
This is an example of a price ticket form with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The CSS and Bootstrap styles are imported to the code with their URLs. 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 ticket details in an orderly manner. The form is given a background color of #fafafa, whereas the price block is given the styles of position as relative, background-color as #ffffff, padding as 30px 30px 25px, max-width as 300px, border as 1px solid #dddddd, box-shadow as 0 20px 40px rgba(0,0,0,0.07), and transition as all 500ms ease. The price block takes a box-shadow effect of 0 0 0px rgba(0,0,0,0.07), in a hover event. The card title has the styles of font-size as 20px, line-height as 1.2em, font color as #212639, font-weight as 500, and text-transform as uppercase to convert each letter of the word to uppercase. The price label takes the effects of padding-right as 80px, whereas the But Ticket button takes the effect of transform as scale(1, 1), in a hover event. Source: https://www.tolmatol.com/price-ticket/
This is an example of a card layout that displays the team profile, designed using HTML, CSS, and Bootstrap framework 4. The fonts, CSS and Bootstrap styles, images, and icons are imported to the code with their URLs. The form is given the styles of background-color as #ffffff, text-align as center, box-shadow as 5.5px 9.526px 43px 0px rgba( 98, 143, 144, .15 ), border-radius as 10px, padding as 40px 0 35px 0, and margin-bottom as 30px. The team member image is given a border-radius as 100% and a width as 100% to get the circle shape. The profile name is given a font-size of 22px, whereas the designation is given the styles of font-size as 14px, color as #fb5c71, text-transform as uppercase to automatically convert all the letters to uppercase. The Facebook, Instagram, and Twitter icons are givene different background colors such as #3973e8, #f74d91, and #29bfe8. Source: https://www.tolmatol.com/our-team-3/
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter