Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

bootstrap
panel
communitycreator

How to use a Bootstrap panel

Chinweuba Elijah Azubuike

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

Bootstrap panel

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 14: We use the panel keyword in the class attribute of a <div>. The panel-primary in the class attribute gives the panel the color.
  • 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.

RELATED TAGS

bootstrap
panel
communitycreator

CONTRIBUTOR

Chinweuba Elijah Azubuike
RELATED COURSES

View all Courses

Keep Exploring