title: Reduce Border bottom length
body: <p><a href="https://i.stack.imgur.com/mvNHu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mvNHu.png" alt="Updated one"></a>Hi I want to know that whether can i reduce length of border bottom. I have a div and i have given border-bottom: 2px to that div i want to reduce the length of border. Is this possible.<a href="https://i.stack.imgur.com/INPro.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/INPro.png" alt="enter image description here"></a></p>
  
  <p>I have this nav-bar and i have given css to its div want to reduce length of border. How can i do that.</p>
  
  <p>This is my html</p>
  
  <pre><code>               &lt;div class="row"&gt;
          &lt;div class="col-sm-12 col-xs-12 col-lg-12 col-md-12 welcome"&gt;
              &lt;ul class="nav navbar-nav navbar-nav-primary"&gt;
                  &lt;li class="active"&gt;
                      &lt;a href="#one" data-toggle="tab"&gt;
                          &lt;i class="fa fa-map-marker" aria-hidden="true"&gt;&lt;/i&gt; &lt;span class="li-text"&gt;Location&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#two" data-toggle="tab"&gt;
                          &lt;i class="fa fa-heartbeat" aria-hidden="true"&gt;&lt;/i&gt; &lt;span class="li-text"&gt;Heartbeats&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#three" data-toggle="tab"&gt;
                          &lt;i class="fa fa-power-off" aria-hidden="true"&gt;&lt;/i&gt;
                          &lt;span class="li-text"&gt;Reboots&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#four" data-toggle="tab"&gt;
                          &lt;i class="fa fa-compress" aria-hidden="true"&gt;&lt;/i&gt;
                          &lt;span class="li-text"&gt;Reconnects&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#five" data-toggle="tab"&gt;
                          &lt;i class="fa fa-battery-full" aria-hidden="true"&gt;&lt;/i&gt;
                          &lt;span class="li-text"&gt;Charge&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>This is my CSS</p>
  
  <pre><code>        .welcome {
                border-bottom: 2px solid #bcbcbc;
                margin-left: 10px;
               }
  </code></pre>