Panels in Bootstrap

How to create panels using Bootstrap?

Panel

Panel is a bordered box which is used to insert a component in a box

 <h2>Panel</h2>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">TechFunda is a online tutorial </div>
        </div>
    </div>

In the above code snippet we have panel, we have panel body inside the panel to define the text in the body

output

Panel heading

It creates heading in the panel

 <h2>Panel-Heading</h2>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">TechFunda</div>
            <div class="panel-body">DotNetFunda</div>
        </div>
    </div>

Panel heading

It creates heading in the panel heading

output

Panel -footer

It creates footer in the panel

 <h2>Panel-Footer</h2>
    <div class="panel panel-primary">
        <div class="panel-body" >Body</div>
        <div class="panel-footer">Footer</div>
    </div>

Panel footer

In the above code snippet we have panel footer

output

Panel group

Panle group is used to group the panel

 <h2>Panel group</h2>
    <div class="container">
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">TechFunda</div>
                <div class="panel-body">DotNetFunda</div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">ITFunda</div>
                <div class="panel-body">KidsFunda</div>
            </div>
        </div>
    </div>

Panel group

In the above code snippet we have defined the panel group, which is used to group the panels

output