v3.x | Panels

# Columns Accent Color Example Panel

Panel Header

Add Footer

Embedded List

Panel Title

Panel body content ... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi ex sed illo, fuga exercitationem dolorem maiores omnis perspiciatis delectus nihil magni?

Footer content

<div class="panel panel-default">
	<div class="panel-heading">
		<h5 class="panel-title">Panel Title</h5>
	</div>
	<div class="panel-body">
      Panel body content ... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi ex sed illo, fuga exercitationem dolorem maiores omnis perspiciatis delectus nihil magni?
   </div>
	<div class="panel-footer">
      Footer content
   </div>
</div>

Custom CSS

Custom CSS is not required for the .panel-title div, but you may wish to ensure your headers are made bold elsewhere in your CSS styles. You may also need to add !important to override Bootstrap's heading styles.

Per the option in the Bootstrap documentation, I've embedded the panel title inside an <H5> element. Remember that the .panel-title class will take the font-weight property (in this case, bold) for the <H5> but will override its size property.

The 'example' panel requires additional CSS.

View all custom Bootstrapr.io CSS

/* Bold Headers */
h1, h2, h3, h4, h5, h6 {
   font-weight: bold !important;
}

.example {
    position: relative;
    margin: 15px 0 -2px 0;
    padding: 50px 20px 12px 20px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    z-index: 10;
}

.example:after {
    content: "Example";
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px 8px;
    font-size: 1rem;
    font-weight: bold;
    background-color: #ececec;
    color: #000000 !important;
    padding: 6px;
    border-radius: 4px 0 4px 0;
    font-weight: 400;
}