Post
Ask Question

Bootstrap For Beginners - Part Seven (Bootstrap Panels)

Introduction

In this article we will create Bootstrap Panels with different styles. Bootstrap panel components are useful when sometimes we want to put content in a box on the webpages.

Panels

A panel in bootstrap is a bordered box with some padding around its content. To create a basic panel,we use .panel class to the <div> element, and content inside the panel has a .panel-body class.

Example 1 : Creating Panel

In this example we will create a basic panel by using .panel class to the <div> element and we will write content in the panel by using .panel-body class to the <div> element. In this example we will use .panel-default class for styling of the panel by writing the following code.
  1. <!DOCTYPE html>    
  2.     
  3. <html lang="en">    
  4. <head>    
  5.     <meta charset="utf-8">    
  6.     <title>Bootstrap Part7</title>    
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">    
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">    
  9. </head>    
  10. <body>    
  11.     <div class="container">    
  12.         <h2>Bootstrap Panel</h2>    
  13.         <div class="panel panel-default">    
  14.             <div class="panel-body">Demo Panel</div>    
  15.         </div>    
  16.     </div>    
  17.     <script src="js/jquery-2.1.4.min.js"></script>    
  18.     <script src="js/bootstrap.min.js"></script>    
  19. </body>    
  20. </html>  
Output



Panel Heading

We can add a heading to our panel by using .panel-heading class.

Example 2: Creating Panel with Heading

In this example we will add .panel-heading class for creating Heading of the panel by writing the following code.
  1. <!DOCTYPE html>    
  2.     
  3. <html lang="en">    
  4. <head>    
  5.     <meta charset="utf-8">    
  6.     <title>Bootstrap Part7</title>    
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">    
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">    
  9. </head>    
  10. <body>    
  11.     <div class="container">    
  12.         <h2>Bootstrap Panel With Heading</h2>    
  13.         <div class="panel panel-default">    
  14.             <div class="panel-heading">Panel Heading</div>    
  15.             <div class="panel-body">Panel Body:Content Write Here...</div>    
  16.         </div>    
  17.     </div>    
  18.     <script src="js/jquery-2.1.4.min.js"></script>    
  19.     <script src="js/bootstrap.min.js"></script>    
  20. </body>    
  21. </html>   
Output



Panel Heading With Title

We can use heading elements from <h1> to <h6> with a .panel-title class.

Example 3: Panel Title

In this example we will use .panel-title class for creating Panel Title by writing following code.
  1. <!DOCTYPE html>    
  2.     
  3. <html lang="en">    
  4. <head>    
  5.     <meta charset="utf-8">    
  6.     <title>Bootstrap Part7</title>    
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">    
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">    
  9. </head>    
  10. <body>    
  11.     <div class="container">    
  12.         <h2>Bootstrap Panel Heading With Title</h2>    
  13.         <div class="panel panel-default">    
  14.             <div class="panel-heading">    
  15.                 <h1 class="panel-title">Panel Title</h1>    
  16.             </div>    
  17.             <div class="panel-body">Panel Body:Content Will Be Here...</div>    
  18.         </div>    
  19.     </div>    
  20.     <script src="js/jquery-2.1.4.min.js"></script>    
  21.     <script src="js/bootstrap.min.js"></script>    
  22. </body>    
  23. </html>   
Output



Panel Footer

We can add a footer to our panels by using the .panel-footer class. In footer we can add text, links, buttons etc.

Example 4: Panel with Footer

In this example we will create footer of the panel by using .panel-footer class by writing the following code.
  1. <!DOCTYPE html>    
  2.     
  3. <html lang="en">    
  4. <head>    
  5.     <meta charset="utf-8">    
  6.     <title>Bootstrap Part7</title>    
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">    
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">    
  9. </head>    
  10. <body>    
  11.     <div class="container">    
  12.         <h2>Bootstrap Panel Footer</h2>    
  13.         <div class="panel panel-default">    
  14.             <div class="panel-body">Panel Body:Content Will Be Here...</div>    
  15.             <div class="panel-footer">Panel Footer</div>    
  16.         </div>    
  17.     </div>    
  18.     <script src="js/jquery-2.1.4.min.js"></script>    
  19.     <script src="js/bootstrap.min.js"></script>    
  20. </body>    
  21. </html>   
Output



Panel Group

We can group many panels together, by wrapping a <div> with class .panel-group around them. The .panel-group class clears the bottom-margin of each panel.

Example 5: Creating Panel Group

In this example we will create Panels and Group it by using .panel-group class by writing the following code.
  1. <!DOCTYPE html>    
  2.     
  3. <html lang="en">    
  4. <head>    
  5.     <meta charset="utf-8">    
  6.     <title>Bootstrap Part7</title>    
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">    
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">    
  9. </head>    
  10. <body>    
  11.     <div class="container">    
  12.         <h2>Bootstrap Panel Group</h2>    
  13.         <!--Panel Group Start-->    
  14.         <div class="panel-group">    
  15.             <!--Panel 1 Start-->    
  16.             <div class="panel panel-default">    
  17.                 <div class="panel-heading">Panel 1 Heading</div>    
  18.                 <div class="panel-body">Panel Content</div>    
  19.             </div>    
  20.             <!--Panel 1 End-->    
  21.             <!--Panel 2 Start-->    
  22.             <div class="panel panel-default">    
  23.                 <div class="panel-heading">Panel 2 Heading</div>    
  24.                 <div class="panel-body">Panel Content</div>    
  25.             </div>    
  26.             <!--Panel 2 End-->    
  27.             <!--Panel 3 Start-->    
  28.             <div class="panel panel-default">    
  29.                 <div class="panel-heading">Panel 3 Heading</div>    
  30.                 <div class="panel-body">Panel Content</div>    
  31.             </div>    
  32.             <!--Panel 3 End-->    
  33.             <!--Panel 4 Start-->    
  34.             <div class="panel panel-default">    
  35.                 <div class="panel-heading">Panel 4 Heading</div>    
  36.                 <div class="panel-body">Panel Content</div>    
  37.             </div>    
  38.             <!--Panel 4 End-->    
  39.         </div>    
  40.         <!--Panel Group End-->    
  41.     </div>    
  42.     <script src="js/jquery-2.1.4.min.js"></script>    
  43.     <script src="js/bootstrap.min.js"></script>    
  44. </body>    
  45. </html>  
Output



Panels with Contextual Classes

To color the panel for particular context we can use contextual classes as
  • .panel-default
  • .panel-primary
  • .panel-success
  • .panel-info
  • .panel-warning
  • .panel-danger
Example 6: Panels with Contextual Classes

In this example we will create panels with heading and we will use Contextual Classes for making panels more meaningful by writing the following code.
  1. <!DOCTYPE html>    
  2.     
  3. <html lang="en">    
  4. <head>    
  5.     <meta charset="utf-8">    
  6.     <title>Bootstrap Part7</title>    
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">    
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">    
  9. </head>    
  10. <body>    
  11.     <div class="container">    
  12.         <h2>Bootstrap Panel Contextual States</h2>    
  13.         <!--Panel 1 Start-->    
  14.         <div class="panel panel-default">    
  15.             <div class="panel-heading">    
  16.                 <h2 class="panel-title">Default Panel</h2>    
  17.             </div>    
  18.             <div class="panel-body">Panel Content</div>    
  19.         </div>    
  20.         <!--Panel 1 End-->    
  21.         <!--Panel 2 Start-->    
  22.         <div class="panel panel-primary">    
  23.             <div class="panel-heading">    
  24.                 <h2 class="panel-title">Primary Panel</h2>    
  25.             </div>    
  26.             <div class="panel-body">Panel Content</div>    
  27.         </div>    
  28.         <!--Panel 2 End-->    
  29.         <!--Panel 3 Start-->    
  30.         <div class="panel panel-success">    
  31.             <div class="panel-heading">    
  32.                 <h2 class="panel-title">Success Panel</h2>    
  33.             </div>    
  34.             <div class="panel-body">Panel Content</div>    
  35.         </div>    
  36.         <!--Panel 3 End-->    
  37.         <!--Panel 4 Start-->    
  38.         <div class="panel panel-info">    
  39.             <div class="panel-heading">    
  40.                 <h2 class="panel-title">Info Panel</h2>    
  41.             </div>    
  42.             <div class="panel-body">Panel Content</div>    
  43.         </div>    
  44.         <!--Panel 4 End-->    
  45.         <!--Panel 5 Start-->    
  46.         <div class="panel panel-warning">    
  47.             <div class="panel-heading">    
  48.                 <h2 class="panel-title">Warning Panel</h2>    
  49.             </div>    
  50.             <div class="panel-body">Panel Content</div>    
  51.         </div>    
  52.         <!--Panel 5 End-->    
  53.         <!--Panel 6 Start-->    
  54.         <div class="panel panel-danger">    
  55.             <div class="panel-heading">    
  56.                 <h2 class="panel-title">Danger Panel</h2>    
  57.             </div>    
  58.             <div class="panel-body">Panel Content</div>    
  59.         </div>    
  60.         <!--Panel 6 End-->    
  61.     </div>    
  62.     <script src="js/jquery-2.1.4.min.js"></script>    
  63.     <script src="js/bootstrap.min.js"></script>    
  64. </body>    
  65. </html>  
Output


In this article we focused on Bootstrap Panels. Then in next articles we will understand all the components of Bootstrap step by step.
 
Read more articles on Bootstrap:


Similar Articles