title: How to set span fixed width for span in bootstrap
body: <p>I am working in a e-commerce website ,In this I need to fix the following issue.
  when I add product to the cart count is added but the span grow it's size based on count how can I fix this issue...</p>
  
  <p><a href="https://i.stack.imgur.com/UBir0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UBir0.png" alt="enter image description here"></a></p>
  
  <p>When I add 100 products this is the span width.</p>
  
  <p><a href="https://i.stack.imgur.com/k6m1Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k6m1Q.png" alt="enter image description here"></a></p>
  
  <p>When I reduce the product count Span width also reduced</p>
  
  <p><a href="https://i.stack.imgur.com/xix9Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xix9Y.png" alt="enter image description here"></a></p>
  
  <p>If I remove the product Span get's it's normal width</p>
  
  <p>What I need is I want the span width as it's normal width ,when I add products to the cart the counter span only grows it's width.</p>
  
  <p>This is the code I written...</p>
  
  <pre><code>&lt;form class="form-inline"&gt;
            &lt;div class="input-group"&gt;
              &lt;div class="input-group-prepend "&gt;
                &lt;span class="input-group-text" id="crt"&gt;
                    &lt;span class=" notification-counter badge badge-danger"&gt;{{nCount}}&lt;/span&gt;
                  &lt;i class="fas fa-cart-plus fa-flip-horizontal text-primary" style="font-size:30px"&gt;&lt;/i&gt;   
                &lt;/span&gt;
              &lt;/div&gt;
              &lt;input type="text" class="form-control bg-white" value="My Cart ({{nCount}})" readonly&gt;
            &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.notification-counter {   
      position: relative;
      bottom: 12px;
      background-color: rgba(212, 19, 13, 1);
      color: #fff;
      border-radius: 10px;
      padding: 2px 2px 2px 2px;
      font: 11px Verdana;
  }
  </code></pre>
  
  <p>and how to make the counter span shape as round ,when I add a single product it's look like this</p>
  
  <p><a href="https://i.stack.imgur.com/iS62F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iS62F.png" alt="enter image description here"></a>
  Thanks ...</p>