title: Add Bootstrap panel with border and centralized text
body: <p>I'm trying to create two panels in bootstrap with centralized text and different fonts in the text. Like the image below</p>
  <p><a href="https://i.stack.imgur.com/aVGwV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aVGwV.png" alt="enter image description here" /></a></p>
  <p>My code:</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-lg-6&quot;&gt;
          &lt;div class=&quot;panel panel-default text-center&quot;&gt;
              &lt;p&gt;
                  Collected This Quarter &lt;br&gt;
                  &lt;b&gt;$8084&lt;/b&gt;
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-lg-6&quot;&gt;
          &lt;div class=&quot;panel panel-default text-center&quot;&gt;
              &lt;p&gt;
                  Average Property Income YTD &lt;br&gt;
                  &lt;b&gt;$16,985&lt;/b&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>However, my output is:</p>
  <p><a href="https://i.stack.imgur.com/OfbSp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OfbSp.png" alt="enter image description here" /></a></p>
  <p>How can I have the &quot;shadow&quot; outside the panels and the text inside in similar font to the image above?</p>
  <p>Thanks you</p>