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 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:
Please Login to comment...