0

Trying to change the Bootstrap Active Tab of nav-pills border bottom to rectangle. The end points are curved and unable to change it to be a solid underline.

Refer this Link: Bootstrap Nav Pills - JSFiddle - I dont know how to put jsfiddle link here. anwyasys. below is the code. kindly help out. jquery above 2.X version use. Unable to resolve the jsfiddle.net link insertion properly

 $(document).ready(function () {console.log("highlight.js file executed...");
     $('ul.nav > li > a').click(function (e) { e.preventDefault(); $('.initial-active').removeClass('initial-active');
         $('ul.nav > li > a').removeClass('active');
         $(this).addClass('active'); 
    });
 });

<h2 class="text-center">Bootstrap Navpills </h2><br /><ul class="nav nav-pills text-center nav-justified ulthis"> 
    <li class="initial-active" role="apisolution">
        <a data-toggle="pill" href="#pricequoteapi">
            <img alt="Price Quote API" src="http://browseideas.com/wp-content/uploads/2012/02/random-mood-photography-20-575x378.png" width="70" height="81" /> <br /> 
            <div>PQ</div> 
        </a> 
    </li> 
    <li role="apisolution"> 
        <a data-toggle="pill" href="#claimadjustapi">
            <img alt="Claim Adjust API" src="https://img00.deviantart.net/08d8/i/2011/040/4/7/random_photography____by_doineedtoknow-d396v4j.jpg" width="70" height="81" /> <br /> 
            <div>CA</div>
        </a> 
    </li> 
    <li role="apisolution"> 
        <a data-toggle="pill" href="#druglistapi">
            <img alt="Drug List API" src="http://www.samhorine.com/imagesrandom/random8.jpg" width="70" height="81" /> <br /> 
            <div>DL</div> 
        </a> 
    </li> 
    <li role="apisolution"> 
         <a data-toggle="pill" href="#medpricingapi">
             <img alt="Med Pricing API" src="https://c1.staticflickr.com/4/3864/14258413420_5717547046_z.jpg" width="70" height="81" /> <br />
        <div>MP</div>
        </a> 
    </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade in active" id="pricequoteapi"> 
    <div> 
     <h3>PQ</h3>  
       <p>PQ section.</p> 
    </div>
   </div>
     <div class="tab-pane fade" id="claimadjustapi"> 
         <div> <h3>CA</h3> 
              <p>CA section</p> 
        </div> 
    </div> 
  <div class="tab-pane fade" id="druglistapi"> <div> <h3>DL</h3> 
    <p>DL section</p> </div> </div> <div class="tab-pane fade" id="medpricingapi"> <div> 
      <h3>MP</h3> <p>MP section</p> </div> </div></div>
    .nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover{ color:black; background-color:white;}.initial-active{ border-bottom: 10px solid #5bc0eb;}.nav > li > a.active { border-bottom: 10px solid #5bc0eb;}.ulthis { border-bottom: 2px solid #FF5FFF;}

Images: Expected One - Active Nav Pills tab being solid underlined expected

This is the one I am trying to resolve. Observe the rounder edges of the active nav pill. Want to change it to like Expected One above unexpected

Please refer the code in the JSFiddle link above. Kindly help out. Thanks!

Zander
  • 84
  • 14
Vivek22
  • 836
  • 1
  • 12
  • 19

1 Answers1

1

Try this:

.nav > li > a.active { border-bottom: 10px solid #5bc0eb; border-radius: none}

Looks like it might have a border-radius predefined, with this it gets reset to 0 radius.

August
  • 2,045
  • 10
  • 23