Search within TutorialsPark

Twitter Bootstrap Panels


To Display Contents within a styled box.


Twitter Bootstrap: Default Panel

1. If you wish to display you contents within a styled box use a panel.Its a box with some basic border and padding around text content.

2. To create a panel use class .panel in the parent element along with the class .panel-default to create a default panel.

3. The contents of the panel are specified in the container with class .panel-body.

Example: Twitter Bootstrap Default Panel

Give it a TRY! »

Twitter Bootstrap: Panels with Headers

1. The header for the panel box can be set using the class .panel-heading in a <div> before the .panel-body.

2. Additionally, a title can be added using the class .panel-title within any <h1 - h6> element.

Example:Twitter Bootstrap Panels with Headers

Give it a TRY! »

Twitter Bootstrap: Panels with Footer

1. A footer containing buttons or secondary text can be included in a panel using the class .panel-footer .

Example:Twitter Bootstrap Panels with Footer

Give it a TRY! »

Twitter Bootstrap: Contextual Alternatives of Panels

1. The panel can be made more relavant to the context by using the class .panel-* in the parent element.

The values possible for the context are primary , success , info , warning , danger .

Example:Twitter Bootstrap Contextual Alternatives of Panels

Give it a TRY! »

Twitter Bootstrap: Custom Content Groups

1. A table can be included within the panel by simply using the class .table with the element <table>

Example:Twitter Bootstrap Custom Content Groups

Give it a TRY! »

Twitter Bootstrap: Panel with List Groups

1. A list group can be included within a panel using class .list-group to encapsulate the list.

Example:Twitter Bootstrap Panels with List Groups

Give it a TRY! »