Bootstrap 4 | Panels

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 describe the basic code to make a panel.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Different classes of panel: There are sections available in a Bootstrap pannel 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • Output:

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

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • Output:

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

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • Output

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

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>
    </body>
      
    </html>  

    chevron_right

    
    

  • Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.