CODEWITHSUNDEEP
htmltwitter-bootstrap
Ben
Ben

Reputation: 27

Bootstrap- How to change the width of the line at the bottom of the nav-tabs?

I am wondering how to change the width of the line at the bottom of the nav-tabs.

On their display page http://getbootstrap.com/components/ where the nav-tabs part the line at the bottom stops just before the end of the page. But mine is keeping at 100%, wondering how do i change the length of that

I tried this but no luck. 

.nav-tabs {
    border-bottom-width: 50px;
    border-width: 50px;
}

Upvotes: 0

Views: 2273

Answers (4)

Shraddha Shinde
Shraddha Shinde

Reputation: 1

There is no property available to set border length. The only workaround I found is using linear gradient.

image for reference: [1]: https://i.sstatic.net/TCyJ7.png

.nav-tab {
  border-bottom: 3px solid;
  border-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 33%,
    rgba(255, 0, 0, 1) 33%,
    rgba(255, 0, 0, 1) 66%,
    rgba(255, 255, 255, 1) 66%,
    rgba(255, 255, 255, 1) 100%
  );
  border-image-slice: 1;
}

Upvotes: 0

Roy Sonasish
Roy Sonasish

Reputation: 4599

I have wrap the ul with a div and set left-right padding on it

<div class="navWrapper">
    <ul class = "nav nav-tabs " role="tablist">    
        <li class="active" id="opened"><a href= "#" >Open </a></li>
        <li id="completed"><a href ="completedlisting.html" >Completed </a></li>
        <li id="completed"><a href ="Interestedclientsgeneral.html" >Test</a></li>
        <li  class="dropdown"id="reload33" ><a href= "#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-filter "></i></a>
            <ul class="dropdown-menu">
            <li><a href="#" id="all">Show all Results</a></li>
            <li><a href="#" id="thisweek">Posted This week</a></li>
            <li><a href="#" id="thismonth">Posted This Month</a></li>
            </ul>
        </li>
    </ul>
</div>



.navWrapper{
    padding:0 15px;
}

here is the updated jsFiddle link hope this will solve your issue.

Upvotes: 1

Punitha Subramani
Punitha Subramani

Reputation: 1477

you are asking like this?

 <style>
 body{
    margin:0px;
 }
 footer{
     width:100%;
     border-top:2px solid #f00;
 }
 </style>

HTML:

 <body>
  <header>
      <ul class="nav-tabs">
        <li>..</li> 
      </ul>
  </header>
  <footer>
      <ul class="nav-tabs">
        <li>..</li> 
      </ul>
  </footer>
  </body>

Upvotes: 0

anujsoft
anujsoft

Reputation: 81

.nav-tabs {

border-bottom-width: 50px;

}

Upvotes: 1

Related Questions