title: Bootstrap tabs - custom style
body: <p>I'm trying to achieve the same kind of 'arrow' styling on bootstrap tabs similar to the screenshot below. How can I achieve something similar?</p>
  
  <p>I have my sample code in jsfiddle where I used bootstrap tabs.
  <a href="https://i.stack.imgur.com/i2H5r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i2H5r.png" alt="enter image description here"></a></p>
  
  <p><a href="https://jsfiddle.net/70Luf7hu/" rel="nofollow noreferrer">https://jsfiddle.net/70Luf7hu/</a></p>
  
  <pre><code>&lt;div&gt;
    &lt;!-- Nav tabs --&gt;
    &lt;ul class="nav nav-tabs" role="tablist"&gt;
      &lt;li role="presentation"&gt;
          &lt;a href="#home" aria-controls="home" role="tab" data-toggle="tab"&gt;Home&lt;/a&gt;     &lt;/li&gt;
      &lt;li role="presentation" class="active"&gt;
          &lt;a href="#office" aria-controls="profile" role="tab" data-toggle="tab"&gt;Office&lt;/a&gt;
      &lt;/li&gt;
      &lt;li role="presentation"&gt;
          &lt;a href="#confirmation" aria-controls="profile" role="tab" data-toggle="tab"&gt;Confirm&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;!-- Tab panes --&gt;
    &lt;div class="tab-content"&gt;
      &lt;div role="tabpanel" class="tab-pane" id="home"&gt;Home&lt;/div&gt;
      &lt;div role="tabpanel" class="tab-pane active" id="office"&gt;Office&lt;/div&gt;
      &lt;div role="tabpanel" class="tab-pane" id="confirmation"&gt;Confirm&lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>