Bootstrap Panels

In this section the panels in bootstrap will be discussed. A panel is a box that has a border and some content. There is padding around the content. A basic panel in bootstrap can be created by using the class .panel with the <div> tag and then by using the class .panel-default.

Consider the following example in which a basic panel is created:

CODE:

<!DOCTYPE html>

<html>

<head>

<title> Bootstrap Example</title>

<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<script src=”/scripts/jquery.min.js”></script>

<script src=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<div class = “panel panel-default”>

<div class = “panel-body”>

A Basic panel

</div>

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

Bootstrap Example


Panel with Heading:

Heading can be added to panels by either using the .panel-heading class or by using the <h1>-<h6> tags with .panel-title class.

Consider the following example in which we have created panel with heading using both of the ways:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example < /title >

< link href = ” / bootstrap / css / bootstrap. min. css ” rel = “stylesheet” >

< script src = ” / scripts / jquery. min. js ” ></ script >

< script src = ” /bootstrap/ js/ bootstrap. min. js ” ></ script >

</ head >

< body >

< div class = “panel panel- default” >

< div class = “panel- heading” >

Heading of Panel using “panel-heading”

</ div >

< div class = “panel- body” >

Content of Panel

</ div >

</ div >

< div class = “panel panel- default” >

< div class = “panel- heading” >

< h3 class = “panel- title” >

Heading of Penel using “panel- title”

</ h3 >

</ div >

< div class = “panel- body” >

Content of Panel

</ div >

< /div >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

Panel with Heading


Panel with Footer:

Footers can also be added to panels by using .panel-footer class with the <div> tag.

Consider the following example in which we have created panel with footer:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” / bootstrap / css / bootstrap. min. css ” rel = “stylesheet” >

< script src = ” / scripts / jquery. min. js ” ></ script >

< script src = ” / bootstrap / js / bootstrap. min. js” ></ script >

</ head >

< body >

< div class = “panel panel- default” >

< div class = “panel- body” >

A basic Panel with Footer

</ div >

< div class = “panel- footer” > Footer of panel </ div >

</ div >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

Panel with Footer


Panel Contextual Alternatives:

A panel in bootstrap can be made more meaningful by adding contextual classes like .panel-success, .panel-warning, .panel-danger, .panel-primary, .panel-info.

Consider the following example in which we have added contextual classes for panels:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” / bootstrap / css / bootstrap. min. css ” rel = “stylesheet” >

< script src = ” / scripts / jquery. min. js ” >< /script >

< script src = ” / bootstrap / js / bootstrap. min. js ” ></ script >

</ head >

< body >

< div class = “panel panel- primary” >

< div class = “panel- heading” >

< h3 class = “panel- title” > Heading of Panel </ h3 >

</ div >

< div class = “panel- body” >

A Basic Panel

</ div >

</ div >

< div class = “panel panel- success” >

< div class = “panel- heading” >

< h3 class = “panel- title” > Heading of Panel < /h3 >

</ div >

< div class = “panel- body” >

A Basic Panel

</ div >

</ div >

< div class = “panel panel- info” >

< div class = “panel- heading” >

< h3 class = “panel- title” > Heading of Panel < /h3 >

</ div >

< div class = “panel- body” >

A Basic Panel

</ div >

</ div >

< div class = “panel panel- warning” >

< div class = “panel- heading” >

< h3 class = “panel -title” > Heading of Panel < /h3 >

</ div >

< div class = “panel- body” >

A Basic Panel

</ div >

</ div >

< div class = “panel panel- danger” >

< div class = “panel- heading” >

< h3 class = “panel- title” > Heading of Panel </ h3 >

</ div >

< div class = “panel- body” >

A Basic Panel

</ div >

</ div >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

Panel Contextual Alternatives


Panel with Tables:

A table can be added to panel by using the .table class within the panel class. It should be noted here that the borders will not be added to table when the table is added to panel using the class .table. If the .panel-body class is added to the <div> tad, then an extra border for the top of the panel will be required. And if this class is not added to the <div> tag then the components will move from the header of the panel to the table.

Consider the following example in which we have created panel with table:

CODE:

<!DOCTYPE html>

<html>

<head>

<title> Bootstrap Example</title>

<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<script src=”/scripts/jquery.min.js”></script>

<script src=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<div class = “panel panel-default”>

<div class = “panel-heading”>

<h3 class = “panel-title”>Heading of Panel</h3>

</div>

<div class = “panel-body”>

A Basic panel

</div>

<table class = “table”>

<tr>

<th>Employee</th>

<th>Salary</th>

</tr>

<tr>

<td>Stuart</td>

<td>24000</td>

</tr>

<tr>

<td>Timothy</td>

<td>44000</td>

</tr>

</table>

</div>

<div class = “panel panel-default”>

<div class = “panel-heading”>Heading of Panel</div>

<table class = “table”>

<tr>

<th>Employee</th>

<th>Salary</th>

</tr>

<tr>

<td>Nicholas</td>

<td>13000</td>

</tr>

<tr>

<td>John</td>

<td>21000</td>

</tr>

</table>

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

Panel with Tables


Panel with List Groups:

List groups can also be added to panels by adding the .panel and .panel-default classes to the <div> tag. Now add list group within this panel.

Consider the following example in which we have created panels with list groups:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = “/ bootstrap/ css / bootstrap. min. css ” rel = “stylesheet” >

< script src = ” / scripts / jquery. min. js ” ></ script >

< script src = ” / bootstrap/ js / bootstrap. min. js ” ></ script >

</ head >

< body >

< div class = “panel panel- default” >

< div class = “panel- heading” > Heading of Panel </ div >

< div class = “panel- body” >

< p > Content of Panel. Content of Panel. Content of Panel. Content of Panel.

Content of Panel. Content of Panel. Content of Panel. Content of Panel. </ p >

</ div >

< ul class = “list- group” >

< li class = “list- group- item ” > First Item </ li >

< li class = “list- group- item” > Second Item </ li >

< li class = “list- group- item ” > Third Item </ li >

< li class = “list- group- item” > Fourth Item </ li >

< li class = “list- group- item ” > Fifth Item </ li >

</ ul >

</ div >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

Panel with List Groups