HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
A panel in bootstrap is a bordered box with some padding around its content
A panel in bootstrap is a bordered box with some padding around its content:
Panels are created with the .panel
class, and content inside the panel has a
.panel-body
class:
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
The .panel-default
class is used to style the color of the
panel. See the last example on this page for more contextual classes.
The .panel-heading
class adds a heading to the panel:
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
The .panel-footer
class adds a footer to the panel:
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
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:
<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>
To color the panel, use contextual classes (.panel-default
, .panel-primary
, .panel-success
, .panel-info
, .panel-warning
, or .panel-danger
):
Create a basic (default) Bootstrap Panel with the words: "Hello World".
<div class=""> <div class="">Hello World</div> </div>