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 PanelGive 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 HeadersGive 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 FooterGive 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 PanelsGive 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 GroupsGive 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.