Skip to content
Related Articles

Related Articles

What are panels in Bootstrap 3 ?

Improve Article
Save Article
Like Article
  • Difficulty Level : Hard
  • Last Updated : 16 Nov, 2021

A panel is a component in bootstrap, which is basically a frame or container consist of some content in form of text, lists or tables, etc., having some padding around it. 

Panels support a large variety of content. Heading, footer or Contextual Alternatives can also be added to panels by using different classes provided by bootstrap.

Some of the major classes of panels in bootstrap are as follows:

  • .panel-heading –  It adds a heading container to the panel.
  • .panel-footer – It adds a footer container to the panel.
  • .panel-group – It clears the bottom margin of each panel.
  • .card-body – It creates a padded section within a panel.

Basic Panels: The basic bootstrap panel can be created by using the .panel class in the div tag of the HTML code where the panel needs to be created and the content or the body inside the panel should be in the .panel-body class which basically creates padding around the content. Also, add the .panel-default class to the div tag of the panel to style and make solid borders of the panel.

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

  
 

Include the following stylesheet link to the code to add basic styling and structure to the panel.

 

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>

 

Example 1: In this example, we are creating a basic panel using Bootstrap.

 

HTML




<!DOCTYPE html>
 
<html>
 
<head>
    <title>Panel example</title>
 
    <link rel="stylesheet" href=
</head>
 
<body>
    <div class="container">
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
         
        <div class="panel panel-default">
            <div class="panel-body">
                Panel content 1
            </div>
        </div>
    </div>
</body>
 
</html>

Output:

As you can see in the output, a basic panel has been created with default styling and having padding around its content.

Example 2: In this example, we are creating a panel having a heading and footer container.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Panel example</title>
 
    <link rel="stylesheet" href=
</head>
 
<body>
    <div class="container">
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
         
        <div class="panel panel-default">
            <div class="panel-heading">
                Panel Heading Container
            </div>
            <div class="panel-body">
                Panel content 1
            </div>
            <div class="panel-body">
                Panel content 2
            </div>
            <div class="panel-body">
                Panel content 3
            </div>
            <div class="panel-footer">
                Panel Footer Container
            </div>
        </div>
    </div>
 
</body>
 
</html>

Output:

As you can see in the output, a panel has been created having a heading and footer container in it with padding around the content i.e. text, and have default styling.

Adding Contextual Alternatives to Panels

We can make our panels more attractive and meaningful to the users using the contextual classes to it.

Syntax:

<div class="panel panel-primary">
</div>
<div class="panel panel-success"></div>

Full Code:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <h1>Panels in Bootstrap </h1>
    <div class="panel panel-success">
        <div class="panel-heading">This the panel heading</div>
        <div class="panel-body">
            This is the Panel content
        </div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">This the panel heading</div>
        <div class="panel-body">
            This is the Panel content
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">This the panel heading</div>
        <div class="panel-body">
            This is the Panel content
        </div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-heading">This the panel heading</div>
        <div class="panel-body">
            This is the Panel content
        </div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading">This the panel heading</div>
        <div class="panel-body">
            This is the Panel content
        </div>
    </div>
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</body>
 
</html>

Output:

Panels with tables

We can also add tables inside a panel to give it a seamless design. A similar piece of code is given below:

Code:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <h1>Panels in Bootstrap </h1>
    <div class="panel panel-default">
        <div class="panel-heading">This the panel heading</div>
        <div class="panel-body">
            This is the Panel content
            <table class="table">
                <tr>
                    <th>Company</th>
                    <th>Product</th>
                    <th>Country</th>
                </tr>
                <tr>
                    <td>Apple</td>
                    <td>Iphone</td>
                    <td>United States of America</td>
                </tr>
                <tr>
                    <td>Tata</td>
                    <td>Steel</td>
                    <td>India</td>
                </tr>
                <tr>
                    <td>Samsung</td>
                    <td>Electronics Goods</td>
                    <td>Korea</td>
                </tr>
 
            </table>
        </div>
 
    </div>
 
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</body>
 
</html>

Output:

Supported Browsers:

  • Google Chrome
  • Microsoft Edge
  • Safari
  • Brave Browser
  • Mozilla Firefox
  • Opera

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!