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 pricing table with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The Bootstrap styles package has been imported to the code with its URL. The form consists of four 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 cards is given the styles of font-weight as 300, font color as #fafafa, font-size as 27px, background as #36d7ac, and border-bottom as solid 1px #41b91c. The price section is given the styles of font color as #bac39f, font-size as 54px, font-weight as 300, background color as #fbfef2, and border-bottom as solid 1px #f5f9e7. In the active and hover modes, the font color of the pricing section turns to #36d7ac. In a hover event, the cards take the border style of 3px solid #36d7ac. The 'Signup' button is given a background color of #f3c200, which gets changed to #cfa500, on hover. Source: https://bootsnipp.com/snippets/90QO4
This is another example of a pricing card layout, designed using CSS, HTML, and Bootstrap framework 4. The Bootstrap styles package has been imported to the code with its URL. The form consists of four 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 price card is given a background color of #727cb6, whereas the header is given #273238. The text-transform style for the card header is set as uppercase to automatically convert the text to uppercase. The price value is displayed with a font-size of 60px. In a hover event, the height of the header section gets changed to 230px from 190px, to create the hover effect. The 'Signup' button is created as a default type button in HTML. Media quarries have been used to increase the responsiveness of the form. Source: https://bootsnipp.com/snippets/klr1j
This is an example of a responsive feature comparison table, designed with CSS, HTML, and Bootstrap framework 4. The font style and the Bootstrap styles 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 table rows, in an orderly manner. The table header title is displayed with a font-size of 25px. The header section of the table is displayed with a style set of background color as #6b6b6b none repeat scroll 0 0, font color as #fff, font-weight as 600, and text-transform as uppercase to automatically convert the text to uppercase. The table rows are given a style set of background color as #da9748 none repeat scroll 0 0, border-bottom as 2px solid #e5a253, font color as #f1f1f1, and font-size as 16px. In a hover event, the background color of the table rows gets changed to #e5a253. Source: https://bootsnipp.com/snippets/33nxX
This is an example of another price card table, designed using CSS, HTML, and Bootstrap framework 4. The Bootstrap styles have been imported to the code with their URLs. 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 card details, in an orderly manner. The price cards are given a background color of #f3f3f3, and a box-shadow style of 0 0 12px 3px #b0b2ab. The three header sections of the price cards are given three different background colors as #665D1E, #C0C0C0, and #FFD700, whereas the font color is set as #fff. The price cards take a box-shadow style of 0 0 12px 3px #b0b2ab, in a hover event. The 'Select' button is created as a primary type button and given a font-size of 18px. Source: https://bootsnipp.com/snippets/May9
This is an example of a responsive pricing table layout, designed using CSS, HTML, and Bootstrap framework 4. The font style and Bootstrap styles 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 card details, in an orderly manner. The form consists of 2 sets of pricing cards. All the price cards take a box-shadow style of 0px 0px 30px rgba(0,0,0, .2), in a hover event. The upper price cards are given the background colors of #EF5A5C, #73A3D4, #65C965, and #808080. The background color of the white pricing cards is set as #dfdfdf. In a hover event, the panel heading section of the white cards take a box-shadow effect of 0px 0px 30px rgba(0,0,0, .05), whereas the body section takes a text-shadow effect of 0px 2px 0px rgba(250,250,250, .9). The 'Buy Now' buttons have been created as danger, success, primary, info, and default type buttons. Source: https://bootsnipp.com/snippets/3xB5q
This is an example of a pricing cards template with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The font and Bootstrap styles have been imported to the code with their URLs. The form consists of three pricing 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 card details, in an orderly manner. The body of the form is given the styles of background color as #cddc36, and font-family as 'Raleway', sans-serif. The title of the form is displayed with the styles of font-size as 36px, font-weight as 800, and font color as #3c2f17. The title of each pricing card is displayed with a font-size of 18px. The price details rows take a box-shadow effect of 0 2px 4px rgba(125,138,164,.06), and a transform effect of scale(1.05), in a hover event. The 'Buy Now' button changes its color to rgba(125,138,164,1), in a hover event. Source: https://bootsnipp.com/snippets/5MWZa
This is an example of another table layout with tabs, designed using CSS, HTML, and Bootstrap framework 4. The Bootstrap styles have been imported to the code with its URL. The form consists of four table tabs. The background color of the table is set as #272e38. The table consists of the tabs section and the tab content section. The tab content section is given a style set of background color as #fdfdfd, line-height as 25px, border as 1px solid #ddd, border-top as 5px solid #e74c3c, and border-bottom as 5px solid #e74c3c. In a hover event, the table tabs take the styles of background color as #e74c3c, font color as #fff, and transition as background 0.20s linear. The first tab of the set is made selected by default, with the areas selected value set as true, whereas the value for the other tabs is set as false. Source: https://bootsnipp.com/snippets/exE6D

Table Layout

4.3.1
This is an example of a data table with tabs, designed using CSS, HTML, and Bootstrap framework 4. The Bootstrap styles have been I ported to the code with their URLs. The form consists of three tabs that display three tables. The tabs are given a style set of font color as #0062cc, background-color as transparent, border-color as transparent transparent #f3f3f3, border-bottom as 3px solid, font-size as 16px, and font-weight as bold. The table rows are given the styles of border as 1px solid transparent, font color as #0062cc, font-size as 16px, and font-weight as 600. The table row items have been created as links to external pages, which take an underline effect in a hover event. The table row items are displayed using the styles of color as #333, and font-weight as 600. Source: https://bootsnipp.com/snippets/AlZ7g
This is an example of another price table layout, designed using CSS, HTML, and Bootstrap framework 4. The Bootstrap styles have been imported to the code with its URL. The form consists of four 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 card details, in an orderly manner. The price table is given the styles of max-width as 400px, min-height as 320px, background-color as #fff, border as 1px solid #ccc, box-shadow as 5px 5px 8px #ccc, display as block, and text-align as center. The title of each price card is displayed with a font-size as 2em, and a text-transform style as uppercase to automatically convert the text to uppercase. The upper section of the first card is given a background color of #212121, whereas the rest is given the colors of #27AE60, #C0392B, and #2980B9. Each card is given a 'Purchase' button, which changes its background color according to its upper section color. Source: https://bootsnipp.com/snippets/lVBNO
This is an example of a pricing table with hover effects, designed using CSS, HTML, and Bootstrap framework 4. The font style and the Bootstrap styles have been imported to the code with their URLs. The background color of the form is set as #010101. The price table container has the styles of text-align as center, color as #666, and font-family style as 'Open Sans', sans-serif. The form consists of six sets of price tables. The card heading of every price table is displayed with a font-size of 36px, and background color of #EEE. One price card consists of the card heading, the cost section, price details, and the 'Signup' button. The price table rows are given a background color as #FFF. The 'Signup' buttons are created as primary, info, danger, success, warning, dark, royal, and static type buttons in HTML and given different background colors. The buttons change their background colors in a hover event. Source: https://bootsnipp.com/snippets/O5pqq
This is an example of stylish price card layouts, designed using CSS, HTML, and Bootstrap framework 4. The font style has been imported to the code with its URL. The form consists of eleven sets of pricing table layouts. Each set consists of three pricing cards. The title of the form is displayed using a font color of #444. The price card sets are given different hover effects. Media quarries have been used to increase the responsiveness of the form. Pricing cards have been imported to the code in SVG format. The card sets are given box-shadow effects, color filling effects, underlining effects, and scale-up effects, to be activated on hover. 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 price card details in an orderly manner. Source: https://bootsnipp.com/snippets/92erW
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
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter