Bootstrap panels can be used to contain any type of content.
This example shows a panel with some text included inside creating a panel is simple as you can see
in the HMO code.
We start by creating a development in assigning a class attribute set to panel and panel default.
Next we create a nested div this div has the class panel body the panel content should be contained
within this div you can see we've just we have the words sample text content and put it inside
we can add a panel heading by creating another nested div and assigning the class panel heading.
So let's go ahead and do that
similarly a panel footer can also be added before we add our footer.
Let's see the file and refresh the page and you can see the panel heading is appeared here
to create the panel footer.
We'll go ahead and add create another div and just give it to the class panel footer
there will save the file and refresh and we can see that we've now added the footer to the panel as
well we can create panel groups by wrapping multiple panels in a div with the with the class panel group.
So here you can see we have our did that with the panel group class and then we have a series of panels
inside.
So we have three panels and the structure of this code is the same as what we just went over in when
talking about the basic panel.
We just have three of them nested inside a panel group we can attach contextual classes to panels to
add color and to do so simply replace panel default with the contextual class you one reply.
So for example panel primary and a warning for example.
Then we'll add a third one danger and I'll just save the file and refresh the page so you can see that
we've added a bit of color to the panels with the contextual classes.