Close

Simple Bootstrap Cards

This is an example of displaying the data in a card format with the use of HTML and CSS. Each card will have the image on the top, title followed by the description. The card styles that are applied to this example have a style of padding left as auto, padding right as auto, min height as 500px, margin top as 15px, box shadow as 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) and transition as .25s box-shadow. To implement the box shadow effect on the mouse hover for each card, the hover event in the CSS style class has been used by updating the box shadow class to the value of 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15). The same styles have been used for the focus event as well. credits - https://codepen.io/reklamarsiv/pen/vgPLLv

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *