Bootstrap 4 | Panels

Last Updated : 12 Jul, 2025

When we have to quote some content on a webpage, we can use a panel. We place the content inbox with some padding around it. A bootstrap panel is indicated with a "panel" class.

Example: This example describes the basic code to make a panel.

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
    <title>Panels</title>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
    </script>
    <style>
        .panel {
            margin: 5px;
        }
    </style>
</head>
<body>
    <h1 style="color:green; text-align:center;">
        GeeksforGeeks
    </h1>
    <h2 style="text-align:center;">
        Panel
    </h2>
    <div class="panel panel-default">
        <div class="panel-body">
            This is a body of bootstrap panel
        </div>
    </div>
</body>
</html>

Output: 


Different classes of panel: There are sections available in a Bootstrap panel like a Bootstrap Cards. All the body parts of Bootstrap Panel are described below: 

  • panel body It is used to define body of a panel.
  • panel heading: It is used to give heading to a panel.
  • panel footer: It is used to give footer class to panel.
  • panel group: It is used to collect different panels together into a group.

panel with contextual classes: Contextual classes are used to color the panel.  

  • panel-default
  • panel-primary
  • panel-success
  • panel-info
  • panel-warning
  • panel-danger

Panel Heading: It is used to create a panel with heading. 

  • Example: 
HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
    <title>Panels</title>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
    </script>
    <style>
        .panel {
            margin: 5px;
        }
    </style>
</head>
<body>
    <h1 style="color:green; text-align:center;">
        GeeksforGeeks
    </h1>
    <h2 style="text-align:center;">
        Panel heading
    </h2>
    <div class="panel panel-default">
        <div class="panel-heading">
            This is a heading of bootstrap panel
        </div>
        <div class="panel-body">
            This is a body of bootstrap panel
        </div>
    </div>
</body>
</html>
  • Output: 

Panel Footer: It is used to add footer into the panel.  

  • Example: 
HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
    <title>Panels</title>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
    </script>
    <style>
        .panel {
            margin: 5px;
        }
    </style>
</head>
<body>
    <h1 style="color:green; text-align:center;">
        GeeksforGeeks
    </h1>
    <h2 style="text-align:center;">
        Panel footer
    </h2>
    <div class="panel panel-default">
        <div class="panel-body">
            This is a body of bootstrap panel
        </div>
        <div class="panel-footer">
            This is a footer of bootstrap panel
        </div>
    </div>
</body>
</html>
  • Output: 


Panel Groups: It is used to collect panels together into a group. 

  • Example: 
HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
    <title>Panels</title>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
    </script>
    <style>
        .panel {
            margin: 5px;
        }
    </style>
</head>
<body>
    <h1 style="color:green; text-align:center;">
        GeeksforGeeks
    </h1>
    <div class="container">
        <h2>Panel Group</h2>
        
<p>
            The panel-group class clears the bottom-margin.
            Try to remove the class and see what happens.
        </p>

        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-body">
                    This is bootstrap panel 1
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-body">
                    This is bootstrap panel 2
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-body">
                    This is bootstrap panel 3
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-body">
                    This is bootstrap panel 4
                </div>
            </div>
        </div>
    </div>
</body>
</html>
  • Output 

Panels with contextual classes: They are used to highlight the panel content as per different situations of use. 

  • Example: 
HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
    <title>Panels</title>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
    </script>
    <style>
        .panel {
            margin: 5px;
        }
    </style>
</head>
<body>
    <h1 style="color:green; text-align:center;">
        GeeksforGeeks
    </h1>
    <div class="container">
        <h2>Panels with Contextual Classes</h2>
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    panel-default</div>
                <div class="panel-body">
                    Content</div>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    panel-primary</div>
                <div class="panel-body">
                    Content</div>
            </div>
            <div class="panel panel-success">
                <div class="panel-heading">
                    panel-success</div>
                <div class="panel-body">
                    Content</div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    panel-info</div>
                <div class="panel-body">
                    Content</div>
            </div>
            <div class="panel panel-warning">
                <div class="panel-heading">
                    panel-warning</div>
                <div class="panel-body">
                    Content</div>
            </div>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    panel-danger</div>
                <div class="panel-body">
                    Content</div>
            </div>
        </div>
    </div>
</body>
</html>
  • Output: 


 

Comment

Explore