Bootstrap 4 | Panels - GeeksforGeeks

01 Sep, 2021
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></body> </html> 
Output: 
 
simmytarika5
Bootstrap-4
Bootstrap-Misc
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Form validation using jQuery
How to change navigation bar color in Bootstrap ?
How to align navbar items to the right in Bootstrap 4 ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to pass data into a bootstrap modal?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?