Bootstrap For Beginners - Part Seven (Bootstrap Panels)

In this article you will learn about Bootstrap.This is part seven of the series that includes 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: