Content panels
Basic panel styles
Flat panel
Flat panel using
.panel-flat class
White panel
White panel using
.panel-white class
Default panel
Default panel using
.panel-default class
Success panel
Success panel using
.panel-success class
Primary panel
Primary panel using
.panel-primary class
Warning panel
Warning panel using
.panel-warning class
Danger panel
Danger panel using
.panel-danger class
Info panel
Info panel using
.panel-info class
Bordered panel styles
Custom panel border
Custom panel border color using
.border-* class
Primary panel
Primary bordered panel using
.panel-bordered class
Danger panel
Danger bordered panel using
.panel-bordered class
Success panel
Success bordered panel using
.panel-bordered class
Warning panel
Warning bordered panel using
.panel-bordered class
Info panel
Info bordered panel using
.panel-bordered class
Top custom border
Panel with top
success border
Left custom border
Panel with left
danger border
Top and bottom borders
Panel with top and bottom
info borders
Bottom custom border
Panel with bottom
success border
Right custom border
Panel with right
danger border
Left and right borders
Panel with left and right
info borders
Border sizing panel styles
Basic size
Basic border size of the element
Large size
Large border size using
.border-*-lg class
Extra large size
Extra large border size using
.border-*-xlg class
Basic size
Basic border size of the element
Large size
Large border size using
.border-*-lg class
Extra large size
Extra large border size using
.border-*-xlg class
Solid panels styles
Primary solid
Primary solid panel using
.bg-primary class
Danger solid
Danger solid panel using
.bg-danger class
Success solid
Success solid panel using
.bg-success class
Warning solid
Warning solid panel using
.bg-warning class
Info solid
Info solid panel using
.bg-info class
Custom color
Solid panel with custom color using
.bg-lime-* class