Panel heading options Panel heading controls and subtitles
Panel title
Basic panel example without heading elements
Panel title With inline subtitle
Basic panel with inline heading subtitle
Panel title With block subtitle
Basic panel with block heading subtitle
Panel controls
Basic panel with panel controls
Panel controls and inline subtitle
Panel with inline heading subtitle and panel controls
Panel controls and block subtitle
Panel with block heading subtitle and panel controls
Panel title options Panel heading font options for titles
Regular Semibold
Mixing regular text with semibold
Semibold Regular
Mixing semibold text with regular
Regular Thin
Mixing regular text with thin
Thin Regular
Mixing thin text with regular
Regular Bold
Mixing regular text with bold
Bold Regular
Mixing bold text with regular
Uppercase Regular
Mixing semibold uppercase text with regular
Regular Italic
Mixing regular text with italic
Thin Uppercase
Mixing thin text with semibold uppercase
Regular Small tag
Regular text with subtitle
Uppercase Small tag
Semibold uppercase text with subtitle
Default Muted
Mixing default color with muted color
Default Primary
Mixing default color with primary color
Default Danger
Mixing default color with danger color
Default Success
Mixing default color with success color
Default Warning
Mixing default color with warning color
Default Info
Mixing default color with info color
Word Highlighted
Mixing default text with highlighted text
Panel footer options Add text or/and links to the panel footer
Default footer
H1 title heading using <h1 class="panel-title"> markup
Transparent footer
H1 title heading using <h1 class="panel-title"> markup
Basic panel styles Available panel styles and colors
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 panels Available panel styles and colors
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
Panel borders Custom 4 side borders for content panels
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 Optional content panel border sizes
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
Panel title sizing Panel title font colors using standard html headings

H1 title

H1 title heading using <h1 class="panel-title"> markup

H3 title

H3 title heading using <h3 class="panel-title"> markup
H5 title
H5 title heading using <h5 class="panel-title"> markup

H2 title

H2 title heading using <h2 class="panel-title"> markup

H4 title

H4 title heading using <h4 class="panel-title"> markup
H6 title
H6 title heading using <h6 class="panel-title"> markup
Solid panels Optional solid color panels
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--* class