How to use a Bootstrap panel

What is a Bootstrap panel?

A Bootstrap panel is a bordered box with padding around the content. We use the panel to put our web content in a box. For better understanding, let's see an example.

Example

Code explanation

We should know that a panel can hold contents of our site, including images. In the example above, we add an image to buttress that point. A panel can be with or without a heading.

• Line 15: We add a heading using the panel-heading in the class attribute of the wrapped <div>. We can name our heading whatever we want. In this shot, we use "Panel Heading."

• Line 16: We add a body where we place our image and the "Panel Content." We do this using the panel-body in the class attribute of the <div>. As explained above, we can put content other than just text.

Note: Both <div>s in line 15 and 16 are enclosed or wrapped in the <div> in line 14.