Bootstrap Panel

A panel is a bordered box with some padding around its content.

Basic Panel

Code Structure

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

Panel Heading

Code Structure

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">Panel Heading</div>
        <div class="panel-body">Panel Content</div>
    </div>
</div>

Panel Footer

Code Structure

<div class="container">
    <div class="panel panel-default">
        <div class="panel-body">Panel Content</div>
        <div class="panel-footer">Panel Footer</div>
    </div>
</div>

Panel Group

Code Structure

<div class="container">
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-body">Panel Content</div>
            <div class="panel-footer">Panel Footer</div>
        </div>
        <div class="panel panel-default">
            <div class="panel-body">Panel Content</div>
            <div class="panel-footer">Panel Footer</div>
        </div>
    </div>
</div>

Panel with Contextual Class

Code Structure

<div class="container">
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">Panel with panel-default class</div>
            <div class="panel-body">Panel Content</div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">Panel with panel-primary class</div>
            <div class="panel-body">Panel Content</div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading">Panel with panel-success class</div>
            <div class="panel-body">Panel Content</div>
        </div>
        <div class="panel panel-info">
            <div class="panel-heading">Panel with panel-info class</div>
            <div class="panel-body">Panel Content</div>
        </div>
        <div class="panel panel-warning">
            <div class="panel-heading">Panel with panel-warning class</div>
            <div class="panel-body">Panel Content</div>
        </div>
        <div class="panel panel-danger">
            <div class="panel-heading">Panel with panel-danger class</div>
            <div class="panel-body">Panel Content</div>
        </div>
    </div>
</div>

Author : Bibek

Share this

Related Posts