This lesson is exclusive to members

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

How to add a drop shadow to a box or card in Bootstrap 4

Daniel Walter Scott

Download Exercise Files Download Completed Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Introduction

I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link: https://www.bluehost.com/track/byol/byol_webess_124

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
Hi there, in this video we are going to add Drop Shadows to our Cards. You can kind of see it pointing out the back there. We're going to add some Padding to the top and the bottom. We're going to try to ignore this Carousel which is going way too fast at the top. So here in my mock-up I've added some shadows to the Card. So I want to see if I can do that in Bootstrap. 

We've kind of stumbled across this earlier, remember. So we were looking to add Drop Shadow to the text. We typed in shadows, and got the wrong one, but it's the one we want now. So it's under 'Utilities', under 'Shadows', there you go, some nice examples.

 So you can kind of see, Shadow Small, it's this one. Shadow Regular is, I think just without anything, and this is the Large one. So let's just use Shadow. Let's go into Visual Studio Code, and you're like, "Where do I put it?" Let's give it a go, let's put it under this one here, the Card Deck. It's pasted in, I'm ignoring that now. Let's add Shadow, and let's see how it goes. 

It's kind of working, right? It's adding a Drop Shadow to the outside of everything, it's not what I want. I need some spacing down the bottom. So let's do both of those things. Let's get rid of that, and maybe here we can add the Margin to the X and Y. I'm drawing like in the air. Does anybody else do that? I can never remember X and Y. So I have to kind of like, go horizontal, vertical, X&Y. I kind of draw it in the air, anyway. So that's the up and the down. 

So the Margin up and the down of this is going to be 5. Let's give it a go. Just add some spacing between there and the bottom. Let's see if we can put the shadow somewhere. Now, didn't work on our Card Deck, it's going to go on probably the Card here. So let's add Shadow, actually, let's do it to all in one go, because I'm reasonably confident this is going to work. I've already done this. Let's save it, let's have a look. Hey, you've got Drop Shadows all the way through. Nice work, high-five, everyone. 

We're getting close to the end, I'm like kind of nervous. Kind of excited as well. It's a long course, looking forward to finishing up, and getting it out there to you. Do you know who is probably more excited than anybody? It's the Editor. Jason is probably more excited than anybody that this is coming to an end. Let's do one of the last videos, let's jump in there now.