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 login form with footer and social media icons, designed using HTML, CSS, and Bootstrap framework 4. The images and icons are imported to the code with their URLs. The body of the form is given a background color of #B0BEC5, and font color of #000. The information card is given a box-shadow of 0px 4px 8px 0px #757575. The social media icons are given a font-size as 18px, border-radius as 50% to get the circular shape, cursor style as pointer to get the hand cursor effect on hover and background color as #3b5998 for Facebook, #1DA1F2 for Twitter, and #2867B2 for LinkedIn. The input text fields are given the styles of border as 1px solid lightgrey, background color as #2C3E50, font-size as 14px, and letter-spacing as 1px. In a focus event, the text fields take a border value of 1px solid #304FFE. The 'Login' button is given a background color as #000, which turn to #1A237E, in a hover event. Source: https://bbbootstrap.com/snippets/login-form-footer-and-social-media-icons-55203607
This is an example of a login form with social media icons, designed using HTML, CSS, and Bootstrap framework 4. The concept of Lists has been used with UL and LI components display the social media icons in an orderly manner. The body of the form is given a background color of #8E24AA, whereas the information container is given the styles of border-top as 4px solid #F8BBD0, and a background-color as #BA68C8. The social media icons are given a border-radius as 50% to get the circular shape, height, and width as 50px, and background color of #ad63b9. The text lines of the form are displayed in #df9de8 color. The input text fields are given a border value of 1px solid #9952a5, which turns to 1px solid #71357b, in the selected mode. The 'Register Now' button is given a height of 45px, and a linear gradient background color of (to right, #E55D87 0%, #5FC3E4 100%), which turn to (to right, #5FC3E4 0%, #E55D87 100%), on hover. Source: https://bbbootstrap.com/snippets/bootstrap-login-form-social-media-icons-56471957
This is an example of a product page template with a buy now button, designed using CSS, HTML, and Bootstrap framework 4. The product image is imported to the code with its URL. The body of the form is given a background color as #ffc107, and a font-family style as Arial, Helvetica, sans-serif. The background color of the information container is set as #fff. 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 product details in an orderly manner. The product details are given a line-height as 50px, and font color as #000. The 'Description' and 'Review' sections are given a font-weight style as Bold. The 'Buy Now' button is given a border color as 2px solid yellow, font color as #000, font-size as 12px, and font-weight as bold, and turns its background color to yellow in a hover event. Media quarries have been used to increase the responsiveness of the form. Source:https://bbbootstrap.com/snippets/bootstrap-product-page-template-buy-now-button-77561293
This is an example of a news template with hover effects, designed using JavaScript, CSS, HTML, and Bootstrap framework 4. The form consists of a background image and a hidden content section that gets expanded in a hover event. The background image is imported to the code with its URL. The title of the form is given a style as center to centralize the text. JavaScript function show(500) has been used to show the hidden content on hover, whereas the function hide(500) has been used to hide the content at other times. The time of the effect is given in milliseconds. The text color for the form is set as White in HTML. The 'Entertainment' badge has the styles of font-weight as 600, font-size as 13px, font color as white, and background-color as #289dcc. The hidden content is given a background color of rgba(76, 76, 76, 0). Source: https://bbbootstrap.com/snippets/news-template-hover-effect-90682283
This is an example of a destination results template, designed using CSS, HTML, and Bootstrap framework 4. The images and fonts are imported to the code with their URLs. The body of the form is given the styles of background-color as #EAEDF4, and font-family as 'Rubik', sans-serif. The header buttons are given a style set of border-radius as 20px, background color as #F3F4F6, padding as 5px 20px 5px, and font color as #8d9297. The images are given a border-radius of 15px. The cursor style for the buttons is set as pointer to get the hand cursor effect on hover. In a hover event, the background color of the button turns to #545EBD, and the font color changes to #fff, except for the first child button of the raw. The destination type text is displayed using a font-size of 12px, whereas the destination name is displayed using a font-size of 15px. Source: https://bbbootstrap.com/snippets/bootstrap-destination-results-template-91495103
This is an example of a need help and support template with a search bar, designed using HTML, CSS, and Bootstrap framework 4. The icons are imported to the code with their URLs. The form consists of six icons, which are given a scale-up effect on hover. The background color of the body is set as blue, whereas the information card is given a background color as #eee. The search bar input text is given the styles of caret-color as #536bf6, font-size as 19px, font-weight as 300, and font color as black. The search icon is given the height and width as 34px, and background color of #536bf6. The cursor style for the icons is set as pointer to get the hand cursor effect on hover. The icons take a transform effect of scale(1.1), in a hover event to create the hover effect. Source: https://bbbootstrap.com/snippets/bootstrap-need-help-support-template-search-97309157
This is an example of a simple payment card, designed using CSS, HTML, and Bootstrap framework 4. The card image is imported to the code with its URL. The body of the form is given a background color of #ffffff, whereas the payment card is given the styles of background-color as #fff, width as 300px, border-radius as 15px, and box-shadow as 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19). The user name is displayed with the styles of font-size as 15px, and color as #403f3f. The total amount due text is displayed with the styles of font color as #137ff3, and font-size as 12px, whereas the due amount is displayed using the styles of font color as #007bff, font-weight as bold, and font-size as 18px. The 'Other amount' input text is given a font-size of 18px, and a font-weight style as bold. The 'Pay amount' button is created as a primary type button and given a style set of width as 150px, height as 60px, border-radius as 8px, and font-size as 17px. Source: https://bbbootstrap.com/snippets/bootstrap-payment-card-78609579
This is a template of a single product page on an e-commerce website, designed using HTML, CSS, and Bootstrap framework 4. The font styles and product images are imported to the code using their URLs. The body of the form is given the styles of font-family as 'Rubik', sans-serif, font-size as 14px, font-weight as 400, background color as #FFFFFF, and font color as #000000The product name is displayed with the styles of font-size as 20px, and font-weight as 400. The rating review line is given a font color of #5b5b5b. The product prize is given a font-size of 30px and a font-weight of 500, whereas the discount is given a font-size of 17px, and a font-weight of 300. The image list takes a box-shadow effect of 0px 1px 5px rgba(0, 0, 0, 0.3), in a hover event. The 'Add to cart' and 'Buy now' buttons are created as primary type buttons. Source:https://bbbootstrap.com/snippets/ecommerce-single-product-page-design-template-64204693
This is an example of a hotel booing modal, designed using HTML, CSS, and Bootstrap framework 4. The images are imported to the code with their URLs. The form consists of a modal button, which expands to the hotel booking form upon clicking on it. The body of the form is given a background color as #eee. 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 dropdown menu, in an orderly manner. The price of a room is displayed using a highlighted font. The no of days is given a font color as green. The date is given the styles of line-height as 17px, and margin-bottom as 8px. The 'Complete booking;' button is created as a danger type button. Most of the form text is displayed using a font-size of 12px. Source:https://bbbootstrap.com/snippets/bootstrap-complete-hotel-booking-modal-template-48147397
This is an example of a credit card payment form with 4 different options, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The card images are imported to the code with their URLs and used to create the payment options as radio buttons. JavaScript methods have been used to implement the functionality of the radio buttons and validate the formatted input of the card number. The background color of the form is set as #C5CAE9. The heading of the form is displayed using a font-size of 40px. The input text fields are given the styles of border as 1px solid lightgrey, border-radius as 6px, width as 100%, font-family as arial, font color as #2C3E50, font-size as 14px, and letter-spacing as 1px. In a focus event, the text fields take the styles of box-shadow as 0px 0px 0px 1.5px skyblue, font-weight as bold, and border as 1px solid #304FFE. Input text field labels are given the styles of line-height as 48px, font-size as15px, and font color as gray, which changes to #304FFE, in a focus event. The 'Pay' button is given a background color of #304FFE, which changes to #3F51B5, on hover. The radio buttons take a box-shadow of 0px 0px 0px 1px rgba(0, 0, 155, 0.4), and a border effect of 2px solid blue, in the selected mode. Source:https://bbbootstrap.com/snippets/credit-card-payment-form-4-different-options-47317865
This is an example of a LinkedIn login page template, designed using CSS, HTML, and Bootstrap framework 4. The background image is imported to the code with its URL. The body of the form is given a color of #eee. The Welcome text is displayed using a font-size of 23px. The input text fields are given the styles of background color as #E3F2FD, margin-top as 10px, font-size as 9px, font-weight as bold, font color as #fff, padding-top and bottom as 15px, and caret-color as red to set the color of the insertion caret. The 'Forgot Password' text is given a font color of #42A5F5. The "login; button is given the styles of background color as #0277BD, font-size as 11px, and font-weight as bold. The 'Sign up' button is given the styles of background-color as #fff, font color as #0277BD, and font-size as 11px. The buttons are created as primary type buttons. The media quarries have also been used to increase the responsiveness of the form. Source: https://bbbootstrap.com/snippets/bootstrap-linkedin-login-page-72193613
This is an example of another payment form with card details, designed using CSS, HTML, and Bootstrap framework 4. The card images are imported to the code with their URLs. The body of the form is given a background color of #BA68C8. The form consists of two containers. The left one is given a background color of #263238 and a font color of white. Both containers are given a height of 600px. The headings in both containers are given a font-weight of 900. The subheading is given a font-size of 14px, whereas the subheading on the left side card is given a border of 1px solid white, while the subheading on the right-hand side is given a background-color as white, and font color as #263238. The input text fields are given a border-bottom style of 1px solid lightgray, whereas the input field text is displayed using the styles of font color as peachpuff, and font-size as 25px. Source: https://bbbootstrap.com/snippets/payment-form-icon-55737250
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter