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.
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 >
|
Panel Footer: It is used to add footer into the 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 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 >
|
Panel Groups: It is used to collect panels together into a group.
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 >
|
Panels with contextual classes: They are used to highlight the panel content as per different situations of use.
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 >
|
Last Updated :
29 Apr, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...