10 Bootstrap Component - Panels

This demo is an extraction from http://getbootstrap.com/components/. created by @juanmendezinfo

by meatHucker

HTML

<link rel="stylesheet" href="http://getbootstrap.com/assets/css/docs.css">
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://requirejs.org/docs/release/2.1.8/minified/require.js"></script>
<h3>0. Basic Panel</h3>

<div class="panel panel-default">
    <div class="panel-body">Basic panel example</div>
</div>

<h3>1. Heading Panel</h3>

<!-- we have different panel flavors class="panel panel-*" primary, success, warning, info, danger -->
<div class="panel panel-success">
    <div class="panel-heading">No title tag</div>
    <div class="panel-body">Panel content</div>
</div>
<!--with title, the difference is just bigger text-->

<h3>2. Heading Panel with Title</h3>

<div class="panel panel-success">
    <div class="panel-heading">
         <h3 class="panel-title">Panel Title</h3>

    </div>
    <div class="panel-body">Panel content</div>
</div>

<h3>3. Panel with footer</h3>

<div class="panel panel-success">
    <div class="panel-heading">
         <h3 class="panel-title">Panel Title</h3>

    </div>
    <div class="panel-body">Panel content</div>
    <!--background color had default, didn't change like header, so i extended color on style-->
    <div class="panel-footer">Panel Footer</div>
</div>

<h3>3. Panel with footer and Nav</h3>
<div class="btn-group pull-right">            
        <button title="Save Panel Settings" class="btn btn-success btn-xs panel-save-settings" style="display:none">                <i class="glyphicon glyphicon-adjust"></i>            </button>            <button title="Panel Settings" type="button" class="btn btn-primary btn-xs panel-edit-settings " data-toggle="modal">                <i class="icon-cog"></i>            </button>            <button class="btn btn-primary btn-xs panel-reset-settings" type="button" title="Reset Panel Settings to Default State">                <i class="glyphicon glyphicon-off"></i>            </button>            <button class="panel-collapse btn...

CSS

.panel-success > .panel-footer {
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.panel-heading > .table, .panel-heading > .table th {
    margin:0px;
    border: 0px;
}