Bootstrap tabs - custom style

Question

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?

I have my sample code in jsfiddle where I used bootstrap tabs.

https://jsfiddle.net/70Luf7hu/

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation">
        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>     </li>
    <li role="presentation" class="active">
        <a href="#office" aria-controls="profile" role="tab" data-toggle="tab">Office</a>
    </li>
    <li role="presentation">
        <a href="#confirmation" aria-controls="profile" role="tab" data-toggle="tab">Confirm</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="home">Home</div>
    <div role="tabpanel" class="tab-pane active" id="office">Office</div>
    <div role="tabpanel" class="tab-pane" id="confirmation">Confirm</div>

  </div>

</div>

What have you tried so far? It appears you only put the BS code and didn't do any styling of your own. Also, your fiddle doesn't include the BS js. — disinfor, Dec 22 '17 at 03:24
As a starting point, check out [Achieving arrow-like shapes in a banner in CSS](https://stackoverflow.com/questions/18077051/achieving-arrow-like-shapes-in-a-banner-in-css) or [How to make this arrow in CSS only?](https://stackoverflow.com/questions/27636373/how-to-make-this-arrow-in-css-only) — roctothorpe, Dec 22 '17 at 04:39

Udhay Titus · Answer 1 · 2017-12-22T09:25:55.513

by using breadcrumb class you can achieve

.breadcrumb {
        background: #ddd;
        display: inline-block;
        padding: 1px;
        padding-right: 18px;

    }

    .breadcrumb li {
        display: inline-block;
        background: white;
        padding: 0;
        position: relative;
        min-width:50px;
        text-decoration: none;
        -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        margin-right: -13px;
    }

    .breadcrumb li#last {
        -webkit-clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
        clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
    }

    .breadcrumb li:hover {
        color: white;
        background: #fff;
    }

    /* first link should not have anything cliped on the left side */
    .breadcrumb li:first-child {
        -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
    }

    .label{
        height: 100%;
        width: 100%;
    }

<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
 .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
 border:0;
 background-color:#fff;
 }
 .nav-tabs > li > a{padding:10px 30px}
  .nav-tabs > li.active {
  border-bottom:3px solid cyan;
  }
  </style>
</head>
<body>

<div class="breadcrumb">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation">
        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>     </li>
    <li role="presentation" class="active">
        <a href="#office" aria-controls="profile" role="tab" data-toggle="tab">Office</a>
    </li>
    <li id="last" role="presentation">
        <a href="#confirmation" aria-controls="profile" role="tab" data-toggle="tab">Confirm</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="home">Home</div>
    <div role="tabpanel" class="tab-pane active" id="office">Office</div>
    <div role="tabpanel" class="tab-pane" id="confirmation">Confirm</div>
    
  </div>

</div>


</body>
</html>

score 5 · Answer 2 · answered Dec 22 '17 at 06:42

.nav-tabs > li > a {margin: 0;}
.breadcrumb input[type="radio"] {
display: none;
}
.breadcrumb input[type="checkbox"] {
display: none;
}
.breadcrumb {
background: #ddd;
display: inline-block;
padding: 1px;
padding-right: 14px;
}
.tab-content {
padding: 15px;
}
.breadcrumb li {
display: inline-block;
background: white;
padding: 0;
position: relative;
min-width:50px;
text-decoration: none;
-webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
margin-right: -13px;
}
.breadcrumb li#last {
-webkit-clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { border-bottom: 2px solid #5cfeea;}
.breadcrumb li:first-child {
-webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);   
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}

<div class="breadcrumb">
   <!-- Nav tabs -->
   <ul class="nav nav-tabs" role="tablist">
      <li role="presentation">
         <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>     
      </li>
      <li role="presentation" class="active">
         <a href="#office" aria-controls="profile" role="tab" data-toggle="tab">Office</a>
      </li>
      <li id="last" role="presentation">
         <a href="#confirmation" aria-controls="profile" role="tab" data-toggle="tab">Confirm</a>
      </li>
   </ul>
   <!-- Tab panes -->
   <div class="tab-content">
      <div role="tabpanel" class="tab-pane" id="home">Home</div>
      <div role="tabpanel" class="tab-pane active" id="office">Office</div>
      <div role="tabpanel" class="tab-pane" id="confirmation">Confirm</div>
   </div>
</div>

Refer this

https://jsfiddle.net/70Luf7hu/10/

score 2 · Answer 3 · answered Oct 24 '19 at 04:51

well i have modified the above solutions to suit my situation well, i just did a little bit of twerkingto make this work in Bootstrap 4+ . in the code below i have not included the external CSS or js files for the Bootstrap 4 framework just copy and paste.

<style>
        .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
        border:0;
        background-color:#0000FF;
    }
    .nav-tabs > li > a{padding:10px 30px}
    .nav-tabs > li.active {
        border-bottom:3px solid blue;
    }


    .c_breadcrumb {
        padding: 1px;
        background: #ddd;
        padding-right: 15px;
        -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        /*
        display: inline-block;

        */
    }

    .c_breadcrumb li {
        display: inline-block;
        min-width:50px;
        background: white;
        text-decoration: none;
        -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        padding: 0;
        position: relative;
        margin-right: -13px;
    }

    .c_breadcrumb li#last {
        -webkit-clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
        clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
    }

    .c_breadcrumb li:hover {
        color: white;
        background: #fff;
    }

    /* first link should not have anything cliped on the left side */
    .c_breadcrumb li:first-child {
        -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
    }


</style>

I have used the nav-fill class to make my tabs fill space .

<div>
    <div  class="c_breadcrumb" >
        <ul class="nav nav-pills nav-tabs nav-fill" role="tablist">
            <li class="nav-item " >
                <a class="nav-link active "  data-toggle="tab" href="#submitted">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link"  data-toggle="tab" href="#pendingApproval">Longer nav link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link"  data-toggle="tab" href="#workInProgress">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled"  data-toggle="tab" href="#complete">Disabled</a>
            </li>
        </ul>
    </div>

    <div class="tab-content" style="margin:5%;">
        <div class="tab-pane active" id="submitted">
            Submitted data will be displayed here....
        </div>
        <div class="tab-pane" id="pendingApproval">
            Pending Approvals will be displayed here....
        </div>
        <div class="tab-pane" id="workInProgress">
            In Progress data will be displayed here....
        </div>
        <div class="tab-pane" id="complete">
            Completed data will be displayed here....
        </div>
    </div>
</div>

Also, remember I have combined the above solutions to suit my scenario, so make changes to suit yours to . so this should work

Bootstrap tabs - custom style

3 Answers3