Bootstrap Portlet CSS Tweak - html

Question

I am using a snippet of code I found that creates port-lets (kinda like panels).
This doesn't specifically have a header to it but I am trying to see if there can be any css added to create one.
<div class="portlet">
<div class="portlet-title">
<div class="caption">
<i class="glyphicon glyphicon-calendar"></i>
<span class="caption-subject text-uppercase"> Portlet</span>
<span class="caption-helper">weekly stats...</span>
</div>
<div class="actions">
<a href="javascript:;" class="btn">
<i class="glyphicon glyphicon-pencil"></i>
Edit
</a>
<a href="javascript:;" class="btn">
<i class="glyphicon glyphicon-paperclip"></i>
Add
</a>
<a href="javascript:;" class="btn btn-circle">
<i class="glyphicon glyphicon-resize-full"></i>
</a>
</div>
</div>
<div class="portlet-body">
<h4>Heading Text</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
Here is the CSS :
.content {
padding: 30px;
background: #f1f3fa;
}
.margin-bottom-30 {
margin-bottom: 30px;
}
/* Portlet */
.portlet {
background: #fff;
padding: 20px;
}
.portlet.portlet-gray {
background: #f7f7f7;
}
.portlet.portlet-bordered {
border: 1px solid #eee;
}
/* Portlet Title */
.portlet-title {
padding: 0;
min-height: 40px;
border-bottom: 1px solid #eee;
margin-bottom: 18px;
}
.caption {
float: left;
display: inline-block;
font-size: 18px;
line-height: 18px;
}
.caption i {
color: #777;
font-size: 15px;
font-weight: 300;
margin-top: 3px;
}
.caption-subject {
color: #666;
font-size: 16px;
font-weight: 600;
}
.caption-helper {
padding: 0;
margin: 0;
line-height: 13px;
color: #9eacb4;
font-size: 13px;
font-weight: 400;
}
/* Actions */
.actions {
float: right;
display: inline-block;
}
.actions a {
margin-left: 3px;
}
.actions .btn {
color: #666;
padding: 3px 9px;
font-size: 13px;
line-height: 1.5;
background-color: #fff;
border-color: #ccc;
border-radius: 50px;
}
.actions .btn i {
font-size: 12px;
}
.actions .btn:hover {
background: #f2f2f2;
}
/* Inputs */
.inputs {
float: right;
display: inline-block;
padding: 4px 0;
margin-top: -10px;
}
.input-inline {
width: 240px;
display: inline-block;
vertical-align: middle;
}
/* Btn Circle */
.actions .btn.btn-circle {
width: 28px;
height: 28px;
padding: 3px 7px;
text-align: center;
}
.actions .btn.btn-circle i {
font-size: 11px;
}
JS Fiddle: https://jsfiddle.net/dmz9xxr2/
What I have tried:
With not knowing much about CSS, I was thinking that I would have to add a background color to a specified height starting from the top of the portlet (.portlet). I may need to add an additional div or span to get this to work but wanted to see if there was any css tricks that could pull this off.
End Goal:

Answer 1

You can use a pseudo element, i.e. ::before.
Updated fiddle
.portlet {
position: relative;
background: #fff;
padding: 20px;
z-index: 1;
}
.portlet::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 59px;
background: steelblue;
z-index: -1;
}