Bootstrap Panels

by freedawirl

HTML

<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>4. Panel embedding <a href="http://getbootstrap.com/css/#tables" target="_blank">Table</a></h3>

<!--panel-->
<div class="panel panel-primary">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <div class="panel-body">
        <!--table-->
        <table class="table table-condensed">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                   ...

CSS

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