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 a chat room layout, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The font style and user avatar images have been 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 information in an orderly manner. JavaScript methods have been used to implement the scrolling feature in the chat list. The chat list section is given a border style as 1px solid #ddd, and height as 510px. The cursor style for the chat list rows is set as pointer to get the hand cursor effect on hover, and a border-bottom style is given as 1px solid #ddd. The rows change their background color to #f4f4f4 on hover mode and #eee on the active mode. The buttons are given a background color of #2ecc71, and a border color of #27ae60. Source: https://www.bootdey.com/snippets/view/Green-chat-room#js
This is an example of a chat room layout with a chat list and messages, designed using CSS, HTML, and Bootstrap framework 4. The font style and user avatar images are imported to the code with their URLs. The form consists of a chat room panel, an input text field to type a new message, and a list of users available for chat. Media quarries have been used to increase the responsiveness of the form. The message avatar is given height and width of 48px, and a border of 1px solid #e7eaec. The message panel is given a background-color of #fff, border style of 1px solid #e7eaec, and text-align style as left. The message date is displayed with the styles of font-size as 10px, and font color as #888888. The input text field is given the styles of background-color as #FFFFFF, border style as 1px solid #e5e6e7, and transition as border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s, and font size as 14px. Source: https://www.bootdey.com/snippets/view/Chat-room-with-right-list#css
This is another example of a message inbox and chat layout, designed using CSS, HTML, and Bootstrap framework 4. The font style is imported to the code with its URL. 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 tab list in the lobby section, in an orderly manner. The tabs take the font color of #00a9b4, and background color as #f2f4f7. The form is given a background color of #f5f5f5. The chat room is divided into three sections and given different styles. The table head of the left and right sections is given the styles of background color as #2980b9, font color as #FFFFFF, and min-height as 70px. The table head of the middle section is displayed with the styles of background color as #3498db, font color as #FFFFFF, and min-height as 70px. The buttons have been created as danger, warning, and success button types. Source: https://www.bootdey.com/snippets/view/Color-chat#css
This is another example of a stylish message inbox layout with the chat section, designed using CSS, HTML, and Bootstrap framework 4. The font style and avatar images 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 message list, in an orderly manner. The user avatar images are given a border-radius of 50% to get the circle shape. In the message list, the user name is displayed with a font-size of 12px, whereas the message is displayed with a font-size of 14px. The message list is given four tabs to indicate four message types. The tabs are given four different border-bottom colors as #2da9e9, #0ec8a2, #ff9e2a, and #314557. The cursor style for the inbox categories is set as pointer to get the hand cursor on hover. Media quarries have been used to increase the responsiveness of the form. Source: https://www.bootdey.com/snippets/view/messages-chat-with-tabs#html
This is an example of a message inbox layout, designed using CSS, HTML, and Bootstrap framework 4. The font-style and avatar images are imported to the code with their URLs. The 'Search' and 'Settings' buttons are created as info type buttons. Each conversation section is given a border-bottom style of 1px solid #ddd. The time of each message is displayed using a font color of #bfbfbf. The heading of the message sections is displayed using the styles of font color as #003bb3, and font-weight as 700. The message date is given a border-bottom style of 1px solid #ddd. The 'Send Message' button is created as a success type button. The avatar images in the conversation section are given a height and width of 50px, whereas the images in the message section are given a height and width of 32px. Source: https://www.bootdey.com/snippets/view/Messages#css

Sliding Form

4.3.1
This is an example of a message inbox layout, designed using CSS, HTML, and Bootstrap framework 4. The font-style and avatar images are imported to the code with their URLs. The 'Search' and 'Settings' buttons are created as info type buttons. Each conversation section is given a border-bottom style of 1px solid #ddd. The time of each message is displayed using a font color of #bfbfbf. The heading of the message sections is displayed using the styles of font color as #003bb3, and font-weight as 700. The message date is given a border-bottom style of 1px solid #ddd. The 'Send Message' button is created as a success type button. The avatar images in the conversation section are given a height and width of 50px, whereas the images in the message section are given a height and width of 32px. Source: https://www.bootdey.com/snippets/view/Messages#css
This is an example of an email inbox layout, designed using CSS, HTML, and Bootstrap framework 4. The background color of the form is set as #eee. The font style has been imported to the code with its URL. The form is given a navbar, where the nav-bar items are indicated by icons. 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 nav-bar items, in an orderly manner. The 'New Email' button is created as a danger type button. The navbar is given a border style of 1px solid #e1e6ef. The child elements of the dropdown list in the navbar, are displayed with a font-size of 14px. The inbox toolbar is given a border-bottom style as 1px solid #e1e6ef. In a hover event, the navbar items change their background color to #f9f9fa. Media quarries have been used to increase the responsiveness of the form. Source: https://www.bootdey.com/snippets/view/bs4-beta-email-inbox#html
This is an example of an email inbox layout, designed using HTML, CSS, and Bootstrap framework 4. The font style has been imported to the code with its URL. The background color of the form is set as #edf1f5. The background color of the card header is set as primary to get the blue color. The inbox card is given a background color of #fff, and a word-wrap style as break-word to allow long words to be able to break and wrap onto the next line. 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 nav-bar items, in an orderly manner. In the active mode, the navbar items take a border-bottom style of 3px solid #2cd07e. Each email line item is given a checkbox. The 'Compose' button is created as a success type button whereas the 'Delete' button is created as a danger type button. Source: https://www.bootdey.com/snippets/view/email-inbox-card#css
This is another example of a stylist price card table with hover effects, designed using CSS, HTML, and Bootstrap framework 4. The Bootstrap style package has been imported to the code with its URL. The form consists of three price cards. 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 price card details, in an orderly manner. The body of the form is given a linear gradient background color as linear-gradient(to right, #E2E2E2, #C9D6FF). The header section of the three cards is given three background colors as #C64545, #2D5772, and #1AA85C. The 'Signup' button is given the styles of background color as #C64545, font color as #fff, and border-radius as 20px. In a hover event, the price cards take a transform of scale(1.05). The Price card is given two deco layers which divide the header section and content section. In a hover event, the first deco layer takes a transform effect of translate3d(15px, 0, 0), and the deco 2 layer takes a transform effect of translate3d(-15px, 0, 0), to create the hover effect. Source: https://bootsnipp.com/snippets/5M12R
This is an example of a simple registration form with focus effects, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The JavaScript methods have been used to implement the focus effects. The body of the form is given a background color as #C5E1A5. The form is given the styles of width as 60%, background as #efefef, text-align as center, and box-shadow as 2px 2px 3px rgba(0,0,0,0.1). The input text field labels are given the styles of font-family as sans-serif, font-size as .8em, letter-spacing as 1px, font color as RGB(120,120,120), transition as ease .3s. The text field line has the styles of width as 100%, height as 2px, and background color as #BCBCBC. In a focus event, the line takes the background color of #8BC34A, with a transform effect of translateX(-50%), whereas the label changes its top value to -3em, to move upwards. The 'Submit' button is given a background color as RGB(120,120,120), which gets changed to #8BC34A, in a hover event. Source: https://bootsnipp.com/snippets/or3WG
This is an example of a credit card payment form, designed using CSS, HTML, and Bootstrap framework 4. The font style, images, and the Bootstrap package has been 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 dropdown list items, in an orderly manner. The form consists of a navbar, dropdown lists, search bar, the payment form, and the footer section. The input text fields of the payment form have been validated not proceed without filling them, by making them required in HTML. The buttons have been created as default, success, and danger type buttons. The social media icons are given a font-size of 8px and change their background colors in a hover event. Source: https://bootsnipp.com/snippets/Ga7Po
This is an example of a pricing table template with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The Bootstrap package has been imported to the code with its URL. . The form consists of three price cards. 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 price card details, in an orderly manner. The header section of the left and right cards is given the styles of background-color as #111, font color as white, and font-size as 25px, whereas the header section of the center card is set as #4CAF50. The price value is displayed with a font-size of 20px. The 'Signup' button is given a style set of background-color as #4CAF50, font color as white, text-align as center, and font-size as 18px. The media quarries have been used to increase the responsiveness of the form. Source: https://bootsnipp.com/snippets/M3PmA
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter