This is an example of a combination of bootstrap accordion and bootstrap table, designed using HTML. The Bootstrap accordion is a component that organizes content within collapsible items, allowing the display of only one collapsed item at a time. A link has been imported to the code to access a more detailed document. The float buttons have been given a drop-down list. Also, the cards are provided with checkboxes and collapsible descriptions.
This is a simple example of displaying the details such as prices and more information in the table format with the use of HTML and CSS. The background of the page has been set to an image with adding the URL of the image. The other styles that are applied for the background are; background size as 100% 100%, background attachment as fixed and the padding as 100px 0. The CSS class text transform has been used with the value of uppercase to automatically convert the text to upper case. The font size of the header is 35px, font weight is 700, font family is 'Lato', sans-serif, font color is #fff, and the text align is center. In order to add the circle shapes, the border radius has been set as 45px along with the other styles as color as #1ab921, background as #fff, padding as 5px, border as 2px solid and box shadow as 0px 0px 11px -5px #000.
credits - https://bootsnipp.com/snippets/z71yy
This is an example of table pricing with the use of the HTML and CSS. The background of the complete page has been set to the value of #303030. The cdn bootstrap CSS links have been imported to the HTML page with the use of the keyword import so the inbuilt styles can be used in the example without re implementing them. Each box of the table has the styles of z-index of 2, top as -13px, border width as 3px, padding as 30px 20px, border radius as 5px, and the border shadow as 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15). In order to add a shade of two colors to the heading section, the CSS style of background image has been used with the value of linear-gradient (#eee, #ddd).
credits - https://bootsnipp.com/snippets/2e6b5
credits - https://bootsnipp.com/snippets/P2eO9
This is an example of displaying the data in a responsive table format with the use of HTML and CSS. The bootstrap CSS style link has been imported to the HTML page with the use of the keyword and . By adding the CSS links of the bootstrap, the grid view of the bootstrap which is already implemented can be used by just setting the class name in the element. In this way, the data could be organized in a table format. The tables have been made responsive with the use of media queries and setting the values of min width as 768px and max width as 992px. The rows have the style of margin top as 0.2em, margin bottom as 0.2em and border as 0.1em solid rgb(163, 163, 163) whereas the border has the thickness of 0.1em with the color of rgb(163, 163, 163).
credits - https://bootsnipp.com/snippets/xV39
This is an example of displaying the details in a table format with the use of HTML and CSS. The bootstrap CSS links have been imported to the HTML page. Bootstrap grid views is used to organize the code. Color codes #C64545, #2D5772 and #1AA85C are used respectively get the colors red, blue and green. In order to display the effects of transform, the CSS class ‘transform’ has been used with the value of transform 0.5s for the transition event. To add the zoom-in effect to the display box, scale class is used with the value (1.05) so its size will be increased with a ratio of 1.05. This style is implemented on the hover event in CSS class so this will be dynamically added to the element on the mouse hover.
credits - https://bootsnipp.com/snippets/5M12R