Bootstrap Tutorial
Bootstrap with CSS
Bootstrap Layout Components
Bootstrap Plugins
Bootstrap Demos
Bootstrap Useful Resources
Selected Reading
Bootstrap with CSS
- Bootstrap - Responsive utilities
- Bootstrap - Helper Classes
- Bootstrap - Images
- Bootstrap - Buttons
- Bootstrap - Forms
- Bootstrap - Tables
- Bootstrap - Code
- Bootstrap - Typography
- Bootstrap - CSS Overview
- Bootstrap - Grid System
Bootstrap Layout Components
- Bootstrap - Wells
- Bootstrap - Panels
- Bootstrap - List Group
- Bootstrap - Media Object
- Bootstrap - Progress Bars
- Bootstrap - Alerts
- Bootstrap - Thumbnails
- Bootstrap - Page Header
- Bootstrap - Jumbotron
- Bootstrap - Badges
- Bootstrap - Labels
- Bootstrap - Pagination
- Bootstrap - Breadcrumb
- Bootstrap - Navbar
- Bootstrap - Navigation Elements
- Bootstrap - Input Groups
- Bootstrap - Button Dropdowns
- Bootstrap - Button Groups
- Bootstrap - Dropdowns
- Bootstrap - Glyphicons
Bootstrap Plugins
- Bootstrap - Affix Plugin
- Bootstrap - Carousel Plugin
- Bootstrap - Collapse Plugin
- Bootstrap - Button Plugin
- Bootstrap - Alert Plugin
- Bootstrap - Popover Plugin
- Bootstrap - Tooltip Plugin
- Bootstrap - Tab Plugin
- Bootstrap - Scrollspy Plugin
- Bootstrap - Dropdown Plugin
- Bootstrap - Modal Plugin
- Bootstrap - Transition Plugin
- Bootstrap - Plugins Overview
Bootstrap Demos
- Bootstrap - featured Demo
- Bootstrap - Icons Demo
- Bootstrap - Social Icons Demo
- Bootstrap - Calendar Demo
- Bootstrap - Map Demo
- Bootstrap - Caption Demo
- Bootstrap - Tabbed slider Demo
- Bootstrap - Ajax Demo
- Bootstrap - Admin Interface Demo
- Bootstrap - Alert Demo
- Bootstrap - Time line Demo
- Bootstrap - Slider Demo
- Bootstrap - Material Design Demo
- Bootstrap - Blog Demo
- Bootstrap - Navigation Demo
- Bootstrap - Responsive Demo
- Bootstrap - Images Demo
- Bootstrap - Buttons Demo
- Bootstrap - Form Demo
- Bootstrap - Table Demo
- Bootstrap - Grid Demo
Bootstrap Useful Resources
- Bootstrap - Discussion
- Bootstrap - Useful Resources
- Bootstrap - Quick Guide
- Bootstrap - Questions and Answers
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Bootstrap - Panels
Bootstrap - Panels
This chapter will discuss about Bootstrap panels. Panel components are used when you want to put your DOM component in a box. To get a basic panel, just add class .panel to the <span> element. Also add class .panel-default to this element as shown in the following example −
<span class = "panel panel-default">
<span class = "panel-body">
This is a Basic panel
</span>
</span>
Panel with Heading
There are two ways to add panel heading −
Use .panel-heading class to easily add a heading container to your panel.
Use any <h1>-<h6> with a .panel-title class to add a pre-styled heading.
The following example demonstrates both the ways −
<span class = "panel panel-default">
<span class = "panel-heading">
Panel heading without title
</span>
<span class = "panel-body">
Panel content
</span>
</span>
<span class = "panel panel-default">
<span class = "panel-heading">
<h3 class = "panel-title">
Panel With title
</h3>
</span>
<span class = "panel-body">
Panel content
</span>
</span>
Panel with Footer
You can add footers to panels, by wrapping buttons or secondary text in a <span> containing class .panel-footer. The following example demonstrates this.
<span class = "panel panel-default">
<span class = "panel-body">
This is a Basic panel
</span>
<span class = "panel-footer">Panel footer</span>
</span>
Panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.
Panel Contextual Alternatives
Use contextual state classes such as, panel-primary, panel-success, panel-info, panel-warning, panel-danger, to make a panel more meaningful to a particular context.
<span class = "panel panel-primary">
<span class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</span>
<span class = "panel-body">
This is a Basic panel
</span>
</span>
<span class = "panel panel-success">
<span class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</span>
<span class = "panel-body">
This is a Basic panel
</span>
</span>
<span class = "panel panel-info">
<span class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</span>
<span class = "panel-body">
This is a Basic panel
</span>
</span>
<span class = "panel panel-warning">
<span class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</span>
<span class = "panel-body">
This is a Basic panel
</span>
</span>
<span class = "panel panel-danger">
<span class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</span>
<span class = "panel-body">
This is a Basic panel
</span>
</span>
Panel with Tables
To get a non-bordered table within a panel, use the class .table within the panel. Suppose there is a <span> containing .panel-body, we add an extra border to the top of the table for separation. If there is no <span> containing .panel-body, then the component moves from panel header to table without interruption.
The following example demonstrates this −
<span class = "panel panel-default">
<span class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</span>
<span class = "panel-body">
This is a Basic panel
</span>
<table class = "table">
<tr>
<th>Product</th>
<th>Price </th>
</tr>
<tr>
<td>Product A</td>
<td>200</td>
</tr>
<tr>
<td>Product B</td>
<td>400</td>
</tr>
</table>
</span>
<span class = "panel panel-default">
<span class = "panel-heading">Panel Heading</span>
<table class = "table">
<tr>
<th>Product</th>
<th>Price </th>
</tr>
<tr>
<td>Product A</td>
<td>200</td>
</tr>
<tr>
<td>Product B</td>
<td>400</td>
</tr>
</table>
</span>
Panel with List groups
You can include pst groups within any panel. Create a panel by adding class .panel to the <span> element. Also add class .panel-default to this element. Now within this panel include your pst groups. You can learn to create a pst group from chapter .
<span class = "panel panel-default">
<span class ="panel-heading">Panel heading</span>
<span class = "panel-body">
<p>This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content.</p>
</span>
<ul class = "pst-group">
<p class = "pst-group-item">Free Domain Name Registration</p>
<p class = "pst-group-item">Free Window Space hosting</p>
<p class = "pst-group-item">Number of Images</p>
<p class = "pst-group-item">24*7 support</p>
<p class = "pst-group-item">Renewal cost per year</p>
</ul>
</span>
Advertisements