1
00:00:00,300 --> 00:00:04,740
Bootstrap panels can be used to contain any type of content.

2
00:00:04,740 --> 00:00:11,760
This example shows a panel with some text included inside creating a panel is simple as you can see

3
00:00:11,760 --> 00:00:13,280
in the HMO code.

4
00:00:13,320 --> 00:00:24,080
We start by creating a development in assigning a class attribute set to panel and panel default.

5
00:00:24,110 --> 00:00:33,850
Next we create a nested div this div has the class panel body the panel content should be contained

6
00:00:33,880 --> 00:00:40,240
within this div you can see we've just we have the words sample text content and put it inside

7
00:00:43,670 --> 00:00:50,500
we can add a panel heading by creating another nested div and assigning the class panel heading.

8
00:00:50,600 --> 00:00:51,680
So let's go ahead and do that

9
00:00:56,770 --> 00:01:01,570
similarly a panel footer can also be added before we add our footer.

10
00:01:01,570 --> 00:01:06,870
Let's see the file and refresh the page and you can see the panel heading is appeared here

11
00:01:10,810 --> 00:01:12,790
to create the panel footer.

12
00:01:12,790 --> 00:01:20,950
We'll go ahead and add create another div and just give it to the class panel footer

13
00:01:24,090 --> 00:01:30,660
there will save the file and refresh and we can see that we've now added the footer to the panel as

14
00:01:30,660 --> 00:01:42,020
well we can create panel groups by wrapping multiple panels in a div with the with the class panel group.

15
00:01:42,020 --> 00:01:48,820
So here you can see we have our did that with the panel group class and then we have a series of panels

16
00:01:49,090 --> 00:01:49,760
inside.

17
00:01:50,460 --> 00:01:57,070
So we have three panels and the structure of this code is the same as what we just went over in when

18
00:01:57,070 --> 00:01:58,890
talking about the basic panel.

19
00:01:59,080 --> 00:02:07,880
We just have three of them nested inside a panel group we can attach contextual classes to panels to

20
00:02:07,880 --> 00:02:15,410
add color and to do so simply replace panel default with the contextual class you one reply.

21
00:02:15,440 --> 00:02:21,240
So for example panel primary and a warning for example.

22
00:02:21,300 --> 00:02:28,800
Then we'll add a third one danger and I'll just save the file and refresh the page so you can see that

23
00:02:28,800 --> 00:02:32,400
we've added a bit of color to the panels with the contextual classes.