title: how to make background fit content and not full width of container in bootstrap
body: <p>I'm doing a card using bootstrap. i'm adding a bg color to a div inside the card body however, the background is extending across all the width of the container. Here's a pic of the card im working on:</p>
  <p><a href="https://i.stack.imgur.com/1zx1e.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1zx1e.jpg" alt="the card im working on" /></a></p>
  <p><strong>How</strong> can i make the background color of the div that contains the picture and the name of the user to only fit to the content and not to 100% width of the card?</p>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;div class=&quot;card&quot;&gt;
    &lt;div class=&quot;card-body&quot;&gt;
  
       &lt;h5 class=&quot;card-title text-center&quot;&gt;Card title&lt;/h5&gt;
       &lt;p class=&quot;card-text&quot;&gt;This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
  
       &lt;div class=&quot;text-center userbg rounded-pill&quot;&gt;
        &lt;a href=&quot;&quot;&gt;&lt;img class=&quot;img-fluid rounded-circle myImg&quot; src=&quot;https://lh3.googleusercontent.com/a-/AOh14Gj07ovBA5rvPW7w90kJll5j3_oqFbc1hpADM4F91w&quot;&gt; 
       &lt;span&gt;User&lt;/span&gt;
         &lt;/a&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  <p><strong>CSS:</strong></p>
  <pre><code>.myImg {
    height: 15%;
    width: 15%;
  }
  
  .userbg {
    background-color: #d3d3d3;
  }
  </code></pre>