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 a pricing table layout, designed using HTML, CSS, and Bootstrap framework 4. The Bootstrap package has been imported to the code with its URL. The title of the header section is displayed using the styles of font color as #626367, font-size as 25px, and font-weight as bold. The header section of the card is given a background color of #f7f7f7, and a border style of solid 2px #5CB85C. The 'Best Choice' section is given a background color of #5CB85C, font color of #fff, font-size as 16px, and a border style of solid 2px #5CB85C. The body of the card is given a border style of solid 2px #ccc. The whole card takes a box-shadow of 0px 0px 30px rgba(0,0,0, .2) in a hover event. The background color of the card turns to #5CB85C, in a hover event where the background color of the 'Best Price' section turns to #f0f0f0. The 'Select' button turns its background color to #fff, and font color to #5CB85C, in a hover event. Source: https://bootsnipp.com/snippets/Nx3pR
This is an example of an invoice print template, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. JavaScript methods have been used to create the functionality of the print button. The company logo has been imported to the code as an image with its URL. The background color of the form is set as #FFF. The invoice header is given a border-bottom style of 1px solid #3989c6. The text-align style of the company details section is set as right. The invoice ID is displayed with a font color of #3989c6. The table column headers are displayed with a font-size of 16px, and a font-weight of 400. The Total section is given a background color as #3989c6, and font color as #fff. The Grand Total section is displayed with the styles of color as #3989c6, font-size as 1.4em, and border-top as 1px solid #3989c6. Media quarries have been used to increase the responsiveness of the form. Source: https://bootsnipp.com/snippets/8MPnQ
This is an example of a registration form with a navbar, designed using CSS, HTML, and Bootstrap framework 4. The font style has been imported to the code with its URL. The concept of Lists has been used with UL and LI components, whereas the UL element has been used with the child elements of LI to display the navbar items and the child elements of the dropdown lists, in an orderly manner. The body of the form is given a font-family style of 'Roboto', sans-serif, and background color of #900c3f. The title of the form is displayed with a font color of #ac1f32, which gets changed to #444, on hover. The input text fields are given a border-bottom style of 2px solid #ddd. The cursor style for the text fields is set as pointer to get the hand cursor on hover. In hover or focus events, the border color of the fields gets changed to #ac1f32. The 'Request a Demo' button is given a background color of #ac1f32, which changes to #ac1f32d7 in a hover event. Source:https://bbbootstrap.com/snippets/bootstrap-registration-form-for-company-s-demo-navbar-70202107
This is an example of a product detail window template, designed using CSS, HTML, and Bootstrap framework 4. The form consists of four product cards. The product images are imported to the code with their URLs. The background color of the form is set as #eee. The product card is given the styles of background-color as #fff, border-radius as 10px to make the corners rounded, width as 190px, 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 upper discount section is given a background color as red and a font-size of 10px. The product name is displayed with a font-size of 13px, and font-weight as bold. The new prize is displayed with a font size of 13px and a font color of red, whereas the old price is displayed with a font size of 8px, and font color of gray. The radio buttons are given a 2px solid border style of their color, which turns to 3px solid, in focus and hover event. Source: https://bbbootstrap.com/snippets/bootstrap-product-detail-window-template-82185599
This is an example of a profile card templates, designed using CSS, HTML, and Bootstrap framework 4. The profile image is imported to the code with its URL. The background color of the form is set as #eee. The profile card is given the styles of background-color as #fff, width as 280px, border-radius as 33px, and box-shadow as 0 4px 8px 0 rgba(0, 0, 0, 0.2). Profile image is given the styles of border-radius as 10px, and border as 2px solid #5957f9. The profile name is displayed with the styles of font-size as 15px, font-weight as bold, and font color as #272727. The user email address is displayed with a font-size of 14px, and font color of grey. The middle container takes the border style of 1px solid #5957f9, in a hover event. The lower tabs are given a style set of font-size as 16px, font-weight as 700, and color as #272727. Each tab takes a border-bottom style of 1px solid #dee2e6, in a hover event. Source: https://bbbootstrap.com/snippets/bootstrap-profile-card-template-hover-11673763
This is an example of an e-commerce shopping cart with order details and shipping details, designed using HTML, CSS, and Bootstrap framework 4. The font style and product image have been imported to the code with their URLs. The body of the form is given a background color or #eee. The title of the form is displayed with the styles of color as #000, font-size as 1.2rem, font-weight as bold, and text-transform as uppercase to automatically convert the text to uppercase. The navbar items are displayed using a font size of 0.8rem, and a font-weight of 600. The cursor style for the input text fields is set as pointer to get the hand cursor on hover. The text fields take the border style of 1px solid #008000, in a hover event. The 'Back to Shopping' button is given a border style of 1px solid #333 and takes the styles of background-color as #333, and font color as #eee, in a hover event. The 'Continue Shopping' button is given a background color of #66cdaa, which gets changed to #3cb371, in a hover event. Source: https://bbbootstrap.com/snippets/bootstrap-ecommerce-shopping-cart-order-status-and-shipping-details-44965481
This is an example of a full-page login form, designed using HTML, CSS, and Bootstrap framework 4. The background image and Bootstrap packages have been imported to the code with their URLs. The body of the form is given a font-family style as 'Roboto', sans-serif. The title of the login box is displayed with a font color of #887c7c. The 'Login' button is given a font color of #fff, and background color of #0067b8. The footer section is given the styles of background-color as #353434d1, font color as white, and text-align as center. . The concept of Lists has been used with UL and LI components, whereas the UL element has been used with the child elements of LI to display the footer items in an orderly manner. In the focus mode, the input text fields take the styles of border-color as #0067b8, and box-shadow as inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6). Source: https://bootsnipp.com/snippets/proZ4
This is an example of another login page with an animated background, designed using JavaScript, CSS, HTML, and Bootstrap framework 4. The background color of the form is set as #00b0ff. The snow icons, font style, and Bootstrap styles have been imported to the code with their URLs. The JavaScript methods have been used to create snowfall animation in the background. The login box is given a width of 350px, border style of 1px solid black, background color of rgba(48, 46, 45, 1), and a transform style of translateX(-50%). The box title has been displayed using a font color of #ff5252, and white and given a text-align style as center. The input text fields are given the styles of background color as RGB(98, 96, 96), font color as white, and font-family as 'Nunito', sans-serif. The 'Login' button is given a set of styles as border-radius as 2px, background color as #ff5252, border-color as rgba(48, 46, 45, 1), font color as white, and font-family as 'Nunito', sans-serif. In a hover event, the button changes its background color to rgba(48, 46, 45, 1), and takes the border color of #ff5252. Source: https://bootsnipp.com/snippets/lVnQq
This is another example of a simple login layout, designed using CSS, HTML, and Bootstrap framework 4. The font and Bootstrap styles are imported to the code with their URLs. The body of the form is given a font-family style of 'Josefin Sans', sans-serif, and a background color of #0e0e0ea. The header title of the form is displayed with the styles of font-weight as 600, font-family as 'Josefin Sans', sans-serif, text-transform as capitalize to make the first letter of each word capital, text-align as center, and font color as #FFF. The inner form is given a background color of #FFF, and a box-shadow style of 0 2px 4px 0 rgba(0,0,0,0.4). The input text field labels are displayed using the font-weight as 400, and font-size as 15px. The text fields are given a style set of background-color as #FFF, font color as #565656, font-size as 14px, and border as 3px solid #ebebeb. The 'Submit' button is created as a default type button and given a background color as #1e6bde, and a border style as 2px solid #FFF. Source: https://bootsnipp.com/snippets/nNd6z
This is an example of another login page, designed using HTML, CSS, and Bootstrap framework 4. The Bootstrap styles are imported to the code with their URLs. The login box is given the styles of width as 400px, background color as rgb(245,245,24), color as #000, and box-shadow style as 0px 0px 0px 5px rgba(0,0,0,0.15). The header and footer titles of the box are displayed with the styles of color as #646464, margin-left as 30px, font-family as Monaco, and font-weight as normal. The input text fields are given the styles of background color as #fff, width as 100%, text-align as center, and border-left as 3px solid #fff. The input fields changes the background to #fcfcfc, and border-left style to 3px solid #646464, in the focus mode. The 'Login' button is created as a primary type button in HTML. Source: https://bootsnipp.com/snippets/j6bpR

Login Page

4.3.1
This is an example of a login page layout, designed using HTML, CSS, and Bootstrap framework 4. The background image and Bootstrap styles have been imported to the code with their URLs. The form consists of social media sign-in buttons, input text fields, 'Remember Me' checkbox, and 'Sign in' button. The title of the form is displayed using the font colors of orange and #f7370a. The panel title is displayed with a font-size of 16px. The Facebook button is given the styles of background-color as #3B5998, font color as white, width as 100%, height as 40px, and text-align as center, whereas the Google button is given the styles of background-color as #dd4b39, font color as white, width as 100%, height as 40px, and text-align as center. The 'Sign In' button is created as an info type button in HTML. Source: https://bootsnipp.com/snippets/7nO2r
This is another example of a login page, designed using HTML, CSS, and Bootstrap framework 4. The font and Bootstrap styles have been imported to the code with their URLs. The body of the form is given a font-family style of 'Josefin Sans', sans-serif, and background color of #f4f4f4. The title of the form is displayed with a style set of font-weight as 600, font-family as 'Josefin Sans', sans-serif, text-transform as capitalize to make the first letter of each word capital, text-align as center, font color as #FFF, and background color as #72d6f5. The login form is given a box-shadow style of 0 2px 4px 0 rgba(0,0,0,0.4). The input text field labels are displayed using a font-weight of 400, and a font-size of 15px. The input text fields are given a background color as #f5f5f5, font color as #565656, font-size as 14px, and border style as 1px solid #f1f1f1. The input text fields take a border-bottom style of 1px solid #6eafc4, in the focus mode. The 'Login' button takes the border color of 2px solid #24acb3, in a hover event. Source: https://bootsnipp.com/snippets/rldXr

Login Page

4.3.1
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter