greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/guide/english/bootstrap/panels/index.md

2.3 KiB
Raw Blame History

title
Panels

Panels

The Bootstrap framework provides you with a feature called panels. A panel is a box that has a styled heading and then a body that allows you to display information in an organized manner, through a set of one or more panels.

How To Use:

To use Bootstrap Panels you add a <div> with a class for your type of panel (class panel panel-default or something similar, see the panel examples for more information.) and then two nested <div> tags, one for the heading (class panel panel-heading) and one for the body (class panel panel-body). You may find that the Code Example is easier to understand than a written explanation.

Code Example

<div class="panel panel-primary">
  <div class="panel panel-heading">Panel Primary</div>
  <div class="panel panel-body"> This is a panel with the primary panel style.</div>
</div>

Panel Examples:

This is a set of examples that shows each type of panel. The CSS Class is displayed above each example.

panel panel-default

Panel Default
This is a panel with the default panel style.

panel panel-primary

Panel Primary
This is a panel with the primary panel style.

panel panel-success

Panel Success
This is a panel with the success panel style.

panel panel-info

Panel Info
This is a panel with the info panel style.

panel panel-warning

Panel Warning
This is a panel with the warning panel style.

panel panel-danger

Panel Danger
This is a panel with the danger panel style.

More Information