WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Panels


In this chapter we discuss Panels

Panels

Panels can be created with the .panel class, and content inside the panel has a .panel-body class:

Example

<div class="panel panel-default">
  <div class="panel-body">I'm Basic Panel</div>
</div>

Panel Heading

The .panel-heading class use in a heading to the panel:

Example

<div class="panel panel-default">
  <div class="panel-heading">I'm Panel Heading</div>
  <div class="panel-body">I'm Panel Content</div>
</div>

We can use any <h1>-<h6> element with a .panel-title class to add a proper styled header:

Example

<div class="panel panel-default">
  <div class="panel-heading">I'm Basic Panel Header</div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">I'm Panel Header with panel-title</h3>
  </div>
</div>

Panel Footer

The .panel-footer class adds a footer to the panel:

Example

<div class="panel panel-default">
  <div class="panel-body">I'm Panel Content</div>
  <div class="panel-footer">I'm Panel Footer</div>
</div>
Try it Yourself »

Panel Group

To group many panels together, wrap a <div> with class .panel-group around them.

The .panel-group class clears the bottom-margin of each panel:

Example

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-body">Panel Content</div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">Panel Content</div>
  </div>
</div>
Try it Yourself »