Bootstrap Border & Rounded Corners
Hi there in this video we are going to look at adding borders, we're going to put a black border around it but no border on this, we're going to add rounded corners on one side, square corners on the other, it's a border and rounded corner extravaganza. Alright, so we want to do a couple of things. I added a black border around the outside of this just so that I could make this into the tutorial because you need to work out the borders. I also added around the corners that I didn't really want just to add them to the tutorial and we did it kind of cool thing about the borders is that it's rounded on one side but not on this kind of internal gaps. So let's work out how to do that. Now let's check out the documentation. Okay, so documentation, it's called borders and it's like all we've got that looks good to me. So it's under utilities borders, there's a bunch of stuff you can say border, just the top. Okay or put a border around the whole thing. There's also border colors. Okay, so I w...
ant to put a border and then a border. Let's go boarded dark so both of these are going to go on my text box. So let's go to the s code let's add it to this class here. Okay. Or this div got lots of things going on here. Now let's see if that works. Success. We've got a black liner on the outside. Let's look at the rounded parts then that should be in the same same bit. If we scroll down there we go, border radius, you've got kind of two options. You've either got just a little bit of rounded or a full circle. Okay, so you can decide whether you want rounded, which is just our rounded corners or you can do rounded circle. Okay. Actually that turns it into a full circle. There's another one called pill which kind of does that begins but leaves the long end and rounded zero. You'd only use if say one of the components has a default round. You can turn it off by making it rounded zero and you've got two sizes for these rounded corners. They look exactly the same. Okay, large and small. Not very big differences. And the other thing is is that I want to do, remember we did my rounded right and left. Okay, so we'll start with the first box would be rounded left. So we're going to apply it to now. We applied the other one to the whole kind of column For the 2nd 1 here. Um It doesn't work in this case because we've got this image. We want to apply around the image. Not the actual class. Okay, I'll show you what I mean. So we need to first of all tell it it's a border. Okay, don't forget that part. And we need to say rounded right or rounded left. Okay. And that is only going to partially work, let's have a look. Okay, because it puts around the edge of the column. That's not what I want. I want to put it around this image. Okay, so the exact same things can go on the image itself. So image source, we've got a class of fluid. Put them both on there and there we go. We've got rounded left. Okay. But square on the right. Okay. It's used a white border. Okay. But let's turn, let's make it the border large as well, which doesn't make a significant change. But there it is. Lastly, it's given it a white line around the outside. It's not what I want. So let's get rid of that default. Okay, so here, let's have a look at the border color. Okay, so not bored of color because I don't want to add a color. I want to try and you can see there we can add a border of zero. Nice. Get a little examples up there. So let's say border. So on my image here, border large, let's make it border zero and there you go. Okay, it's got a little rounded corners on the edges and there is no stroke around it. Let's do the borders on the right here. So instead of left, we're going to do it to this column here. Lots of stuff going on after border dark. It's going to be rounded left. It didn't work. That needs to be rounded. Right? Oh, lovely rounded corners. The other thing I want to do is make sure that it is a border border large, mm hmm. There you go. All right. That's it. For our exciting border video. We did some rounded corners. We added some lines around the outside. Let's get on to the next video.