Close

Bootstrap cards with image grid

This is another example of a simple bootstrap tile layout with a photo grid, designed using HTML, and CSS. Bootstrap styles are imported to the code with its URL. The Li element of lists has been used to display the card details in a list. The background image has been added to the form with the given link. The body is given a style set of font-family as 'Montserrat', font-style as Italic, background-attachment as fixed, background-position as center, and padding as 20px whereas the header is given the styles of text-align as center, padding as 20px, and font-size as 20px. The card title is given the styles of font-weight as bold, and text-align as center. The left panel is given a style set of position: relative, left: 5%, background-color: #555, color: white, font-size: 16px, padding: 12px 20px, border-radius: 5px, and cursor as pointer to display the hand cursor. The right panel is given the styles of position: absolute, right: 10%, background-color: #555, color: white, font-size: 16px, padding: 12px 20px, border-radius: 5px, and cursor: pointer. The modal view of the learn more button is given a color of linear-gradient(white,#7FDBFF). Source: https://codepen.io/soumyashaw/pen/maOzLO

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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.