Hello, in this video, we are going to look at labels in bootstrap four labels are just little small tags that you can add some information to literally any form of content whatsoever. So for example, if you're on a website, and you might see like some little sort of white box next to it, that's colored in a certain color, maybe it's blue or red or whatever, and it might say the word new in there. So it's just giving some information that that particular content is new. That's what we're going to be doing today. Not necessarily sure saying something new, but just showing you labels and how you can use them. So let's go to our text data labels are really simple.
Want to do a span tag, and the span tag needs to have a class of label. And next you just put label dash, whatever type of styling you want for your label. They're very similar. To the Save button styling and all the other styling, but we'll show you all the different styles that you can do. So inside you simply put the text that you want on default. So it's basically what this label is.
And what I'm going to do is copy and paste this. So there are six instances, because there are six different variations. So the next one is primary success. info, wars, warning, and danger. So let's save this actually, let's just update the text. We don't need to stress the or look a little nicer, I'd say.
So that go to Web browser refresh. There you go, we have our label sorry, as a bit of a curve to the edges, I mean the corners, and he also adds a background so they look really, really cool. So like I was saying you could have something like this next to something that's new have something like this when something's gone wrong, and maybe this could be some information and a tooltip. And obviously, this is some generic bland color. But that's not where the labels end because there is a pill label variation. And that just has more rounded corners.
That's all it is. We're gonna show you them as well. So let's just put some break rules. To do them, they're, they're essentially the same but they just have an extra class. I'm gonna copy all of them and do it. Just add an extra class to anyone that you want.
The pill variable Label dash pill. So I can simply copy and paste this for the blind. Yeah. I don't think you work in at the moment for whatever reason I was trying to do the square selection. Either way, that's let's just continue. So if we refresh, there we go.
Our labels are even more curved now. And hence, you can most likely see why they have the name pill, they look like pills that you would take. Just one last note. They actually scale to the size of their parent container deem their immediate parent container, but it's so easy to the font size. So for example, just going to copy paste this here. Doesn't matter which one you actually The use of the selected the first one great Klein breakline.
And then here, I'm just actually around I'm gonna for Dave. What I'm gonna do is just do some storytelling. Usually you don't want storyline nights in line, I mean you're wanting in a separate file. But this is just to make it easier for the purpose of this video from a Fanta sois. Free em to be pretty big save that, go to our browser refresh, actually might be best if we actually put something in here as well. So hello, world.
Refresh. As you can see, the pill is now the same size as the containers. I mean the containers font size, so if I were to reduce that to something like 0.2 em I think he's a lot smaller. Obviously, that's not readable. But you could also just be a one em as well. And as you can see, it scales accordingly.
So you don't need to start applying any CSS and whatnot and petitioning for the label. Whatever the font size of the parent container is, it will match that. If you have any questions, feel free to post them on sonar learning code at UK for slash question dot php. There'll be a link in the description to that. Plus, there'll be another link in the description to source code from this video. And as usual, thank you for watching and have a great day.