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 another example of an Our Services card layout, designed using HTML, CSS, and Bootstrap framework 4. The images are imported to the code with their URLs. The form consists of six columns. The background color of the form is set as #fff. The card title is given the styles of text-transform as uppercase to automatically convert the text to uppercase, font-weight as 700, and margin-bottom as 15px. The Read more button is given a font-size as 14px, whereas the content section is given the styles of opacity as 0, visibility as hidden to display only in a hover event, and transition as all .5s ease-out. In a hover event, the content takes the styles of opacity value as 1, and visibility value as visible. In a hover event, the overlay card gets placed over the image card with a linear gradient background color of linear-gradient(to right,rgba(62,214,115,.5),rgba(157,218,62,.5))!important. Source: https://www.tolmatol.com/gym-services/
This is another example of an Our Services layout, designed using HTML, CSS, and Bootstrap framework 4. The fonts are imported to the code with its URL. The services card is given the styles of position as relative, padding as 35px 15px, text-align as center, and border as 2px solid #efefee, whereas the inner icon box has the styles of position as relative, font-size as 60px, color as #009dea, line-height as1em, and margin-bottom as 20px. The title of the services card is given the styles of color as #222222, font-size as 18px, font-weight as 600, and margin-bottom as 15px. In a hover event, the title changes its color to #009dea. The content section of the card has the styles of font color as #888888, font-size as 14px, and line-height as 1.8em. In a hover event over the service card, and outer layer with the background color of rgba(0,0,0,0.80), and opacity of 1, and a transform value of perspective(400px) rotateX(0deg), gets displayed over the inner card. Source: https://www.tolmatol.com/our-services/
This is an example of an Our Services layout with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The font style is imported to the code with its URL. The layout consists of three columns. The font style for the web page is given as 'Poppins', sans-serif. The form is given a linear gradient background color of (#6A1B9A, #9C27B0 50%, #fff 50%, #fff). The display style for the services cards is given as flex. The service cards are given the styles of width as 280px, background as #fff, padding as 60px 40px 60px, and box-shadow as 0px 15px 45px rgba(0,0,0,.1). The card number has the styles of font-size as 4em, font-weight as 800, z-index as 1, opacity as 0.2, and transition s 0.5s, which takes the styles of opacity as 1, color as #fff, and transform as translateY(-50px), in a hover event. The image card takes the styles of transform as scaleY(1), transform-origin as bottom, and transition as transform 0.5s, in a hover event to turn the background of the card to #ff226d. Source: https://www.tolmatol.com/our-services-2/
This is an example of an image card layout depicting the item category list, designed using HTML, CSS, and Bootstrap framework 4. The images and Bootstrap styles are imported to the code with their URLs. The image is given the styles of width as 100%, and cursor as pointer to get the hand cursor effect in a hover event. The content section of the card is given the styles of position as absolute, width as 100%, text-align as center, transform as translateY(100%), background as #fffffff2, max-width as 80%, margin as 0% 10%, cursor as pointer, border-radius as 5px, padding as 15px 0px, and transition as all .5s. The subtitle of the card is given a text-transform style as uppercase to automatically convert the text to uppercase, whereas the title is given the styles of font-weight as 600, font-size as 22px, and line-height as 1.6. In a hover event, the content section takes the styles of border-radius as 50px, max-width as 90%, and margin as 0% 5% to form an oval shape. Source: https://www.tolmatol.com/bootstrap-snippets-category-list/
This is an example of a Blog layout 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 background form is given the styles of height as 105px, width as 100%, and background-color as #ffffff. The inner box of the blog card is given the styles of padding as 0 40px 35px, background-color as #fafafa, and border-radius as 10px. The image box is given a background color of #9C27B0 to appear only in a hover event. The image is given a transition value of all 500ms ease. In a hover event, the image takes a transform effect of scale(1.1), and an opacity value of .5. The information box has the styles of width as 100%, background-color as #ffffff, transform as translateY(-50%), min-height as 80px, padding-top as 20px, text-align as center, border-radius as 5px, and box-shadow as 0 18px 28px rgba(11,11,77,.14). The blog card title is given the styles of font-size as 18px, line-height as 25px, color as #12114a, font-weight as 500, and margin-bottom as 18px. In a hover event, the card title takes the color of #9C27B0. Source: https://www.tolmatol.com/bootstrap-blog-example-using-bootstrap-4/
This is an example of a simple footer with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The font, 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 child elements of the footer, in an orderly manner. The background color of the form is set as #fff, whereas the footer logo is given the styles of font-size as 1.8em, font-weight as 600, color as #333, margin-bottom as 22px, and display as block. The footer is given the styles of background as linear-gradient(to right,#fff 0,#535df1 50%,#fff 100%), height as 5px, width as 100%, and position as absolute. The child elements of the footer have the styles of font color as #6d6e71, font-size as 15px, and line-height as 30px. In a hover event, the child elements take the styles of font color as #27aae1, with a transition value of all 1s. Source: https://www.tolmatol.com/free-snippets-footer-design/
This is an example of an image card layout depicting the item categories, with animations, designed using HTML, CSS, and Bootstrap framework 4. The images, font, Bootstrap and CSS styles are imported to the code with the URLs. The image card title has the styles of color as #ffffff, font-size as 20px, and font-weight as 700. The image card container has the styles of width and height as 100%, background as #222222, transition as 0.5s, and opacity as .45. The image card also acts as a link to its respective collection, which can redirect the users to an external link. The card image is given width as 100% to cover the whole card and a transition value as 0.5s. In a hover event, the image card takes a transform value of scale(1.1), to display a zoom-in effect. Source: https://www.tolmatol.com/bootstrap-categories-snippets-image-over-zoom/
This is an example of a login web page, designed using HTML, CSS, and Bootstrap framework 4. The font, background image, CSS, and Bootstrap styles are imported to the form with their URLs. Media quarries are used to increase the responsiveness of the form. The body of the form is given the styles of font-family as 'Poppins', sans-serif, font-weight as 400, background as the URL of the image, background-size as cover, height as 100vh, width as 100%, and background-position as center. The content section on the left pane is given a font-size of 14px. The Facebook, Google, and Twitter buttons are given three different background colors as #4c699e, #da573b, #1daee3, with a border value as solid 1px, and change their background colors and border values to #47618d, and solid 1px #3c5173, #be5238, and 1px #9b4631, #3997ba, and 1px #347b95, respectively in a hover event. Source: https://www.tolmatol.com/bootstrap-snippets-login-form/
This is an example of another Contact Us form, designed using HTML, CSS, and Bootstrap framework 4. The image, font, Bootstrap and CSS styles are imported to the code with their URLs. The body of the form is given the styles of font-family as 'Poppins', sans-serif, and font color as #fff. The form is given the styles of background-color as #484848!important, padding as 20px, and font color as #ddd. The input text fields are given the styles of background as #4b5054, color as #fff, and min-height as 45px. In a focus event, the text fields take the styles of border-color as #673ab7, background as #2e3133, and font color as #fff. The text field label is given a font color of #ddd. The submit button is given a font-size of 16px, and a padding value of 10px 20px. The text rows have the styles of margin as 12px 0px, and line-height as 1.6. Source: https://www.tolmatol.com/contact-us-using-html-css/
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter