Card Image Caps

2 minutes
Share the link to this page
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card


Hello, in this bootstrap four video, we're going to show you image caps, which allow you to position the image at the top or the bottom similar to the header and footer inside your card. At the moment, by default, we put it at the top. And I'm going to take a quick look on your screen or on my screen of how the entire card looks in terms of the styling. So you look at the bottom and up to the top, very key to what we're going to be doing. So to actually position it at the bottom, all you do is just take the image and simply put it at the bottom of the card. There's nothing to it more than that.

But a save this, refresh this and now at the bottom, do you notice something different other than it's obviously at the bottom, these corners are no longer rounded the top corners around it, and this doesn't look very good. So to actually fix this, you just go to the class instead of car dash OMG desktop, think you get the code dash IMG dash bottom, save that refresh. And now, these corners are nice squared off to match the style of the internal elements of the card and the corner at the bottom on narrow, rounded, it just makes the chord look that little bit better, which overall helps improve the user experience and the user interface on your website. So that's image caps. If you have any questions, feel free to post them on our education platform, sonar learning Dakota, UK for slash question dot php, there'll be a link in the description.

Plus, there'll be another link in the description to all the source code from this video and source code from every other video in this series. Please rate, comment and subscribe and it does really help keep the content free plus it also helps us give more content to you on a regular basis. And as usual, thanks for watching and have a great day.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.