Open In App

Bootstrap 4 | Panels

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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=
    <script src=
    </script>
    <script src=
    </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=
    <script src=
    </script>
    <script src=
    </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=
    <script src=
    </script>
    <script src=
    </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=
    <script src=
    </script>
    <script src=
    </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=
    <script src=
    </script>
    <script src=
    </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: 

 



Last Updated : 29 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads