Add Bootstrap panel with border and centralized text - css

Question

I'm trying to create two panels in bootstrap with centralized text and different fonts in the text. Like the image below
My code:
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default text-center">
<p>
Collected This Quarter <br>
<b>$8084</b>
</p>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-default text-center">
<p>
Average Property Income YTD <br>
<b>$16,985</b>
</h4>
</div>
</div>
</div>
However, my output is:
How can I have the "shadow" outside the panels and the text inside in similar font to the image above?
Thanks you

Answer 1

I also used to face this problem. So, here is the workaround.
Add the top-level child divs and give them padding (like p-1). This is their only job.
Within each top-level div, add your cell's main content, and style them however you want.
This is the code
<div class="parent row">
<div class="col-lg-6 p-1">
<div class="shadow-sm text-center child">
<p class="p-0 m-0">
Collected This Quarter <br>
<b>$8084</b>
</p>
</div>
</div>
<div class="col-lg-6 p-1">
<div class="shadow-sm text-center child">
<p class="p-0 m-0">
Average Property Income YTD <br>
<b>$16,985</b>
</h4>
</div>
</div>
</div>
Normally I reset padding and margins for .row and .col classes
<style>
.row, .col-lg-6 {
padding: 0;
margin:0;
}
.child {
background-color: white;
}
.parent {
background-color: #F3F4F5;
}
</style>
The result is like this
NOTE: I've used bg-dark and bg-light classes for showing the background colors of parent and child divs. You can give them whichever color you want.

Answer 2

Check out this, used .panel-body wrapper
https://jsfiddle.net/420gwtLz/7/
I will suggest using the latest version of Bootstrap, you will get utility classes for shadow and spacing.