Bootstrap 3 Essential Training, Working with labels and badges

Labels and badges are two useful CSS components that can take care of instances where you want to pass certain bits of information to the user. First, let’s do some labels. I have here a really simple layout.

It’s got a menu here at the top and then just a three-column layout down here with this sort of bigger section. So, we’re going to be inserting a label and to do that, all you need to do is add a span class. So let’s go ahead and right in here next to Exotic Pets, I’m going to add span with a class of label.

And then like with many of the other classes, you have to add a contextual color so you can say label-default and let’s go ahead and scoot this over this way so we can see what we’re doing. And inside this span, I’m just going to say new.

So that gives you this new sort of little badge right here. It’s actually not a badge because badge is the next thing that we’ll be doing. Now, you have a number of different colors that you can use.

So, let’s see. Let’s go ahead and show you that the colors are just like any other Bootstrap colors.

Leave a Reply

Notify of