1
00:00:00,570 --> 00:00:05,370
Using Bootstrap we can create a variety of different badges and labels to add emphasis to different

2
00:00:05,370 --> 00:00:07,160
HMO elements.

3
00:00:07,230 --> 00:00:08,970
We can see several examples on this.

4
00:00:08,970 --> 00:00:12,890
Each GMO page starting with badges next to each link.

5
00:00:12,930 --> 00:00:18,380
We can see a badge each containing a number to create this.

6
00:00:18,490 --> 00:00:24,150
We simply need to create a spend and give it a class attribute equal to badge is shown here

7
00:00:27,030 --> 00:00:28,680
the spend element is created.

8
00:00:28,720 --> 00:00:39,860
In this case inside a link element we start with our a tags followed by their h ah yes attribute and

9
00:00:39,860 --> 00:00:50,020
then the label for the link and then our spin element so the spend element in this case is it is given

10
00:00:50,020 --> 00:00:55,680
the class badge and that's what creates this circle with the with the number inside.

11
00:01:01,300 --> 00:01:10,620
We have a couple of other examples just with the different labels and different values.

12
00:01:10,660 --> 00:01:16,500
Now here we see that button that badges can also be inserted into buttons.

13
00:01:17,110 --> 00:01:27,360
So we have a button element and inside the button element we have our spend element.

14
00:01:28,290 --> 00:01:34,310
And once again we've assigned the class badge in this particular stand has a value of 10.

15
00:01:34,350 --> 00:01:38,850
As we see here that's the kind of effect it creates

16
00:01:41,820 --> 00:01:48,360
the next block of code here is an example of labels attached to headings so we start with the heading

17
00:01:48,360 --> 00:01:53,520
tag and insert our spend element inside the heading tag.

18
00:01:53,520 --> 00:02:03,390
So we start with open each one the label for the heading and the spent element so this time since this

19
00:02:03,390 --> 00:02:05,210
is we're creating a label.

20
00:02:05,370 --> 00:02:12,710
We've used the label class and specified which label style we'd like to apply.

21
00:02:12,740 --> 00:02:19,460
So in this case we have label primary in the next example we have label warning and then danger and

22
00:02:19,460 --> 00:02:20,470
info.

23
00:02:20,570 --> 00:02:29,330
So that's what gives each label its unique color and you can see that the label decreases in size along

24
00:02:29,330 --> 00:02:30,340
with the headings.

25
00:02:30,350 --> 00:02:39,120
So depending on which heading element you use the label will course label size will correspond to the

26
00:02:39,120 --> 00:02:48,880
heading and we can create labels outside of any other element as well by simply using this band tags.

27
00:02:48,890 --> 00:02:53,680
Here we have a series of labels each with a different label class.

28
00:02:54,200 --> 00:03:02,780
So the first one is label and then label default label label primary and so on and so forth and you

29
00:03:02,780 --> 00:03:10,590
can see that this is the end result here for this block of code.