CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3075987
user3075987

Reputation: 881

Replace bootstrap pills with underline

I'd like to replace the boostrap pills to be rendered with underlines. 1) So the active one "APPLE TREES" would be shown with out a pills on it's backgorund. Instead the text would be bolded and there will be a 3px solid underline (color #e9a39c) underneath the text. 2) If you go to the next tab. That one would turn bold and have the 3px solid underline. 3) I don't want to show any pills

Here's my bootply: http://www.bootply.com/rvfgvjf0dF

Here's my HTML:

    <div class="content-section-c">

    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <h2>Sample Search Results</h2>
            </div>
        <div class="tabbable">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#pane1" data-toggle="tab">APPLE<br>
                TREES
                               </a></li>
            <li><a href="#pane2" data-toggle="tab">ORANGE<br>TREES</a></li>
            <li><a href="#pane3" data-toggle="tab">PEARS <br> TREES</a></li>
            <li><a href="#pane4" data-toggle="tab">BANANAS</a></li>
            <li><a href="#pane4" data-toggle="tab">GRAPE<br> TREES</a></li> 
                           </ul>
          <div class="tab-content">
            <div id="pane1" class="tab-pane active">
              <p>126 Results Founds</p>
            <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/01_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/02_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/03_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/04_card.png"></div> 
                                                  </div>
            <div id="pane2" class="tab-pane">
            <p>75 Results Founds</p>
            <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/05_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/06_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/07_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/08_card.png"></div> 
            </div>
            <div id="pane3" class="tab-pane">
              <p>144 Results Founds</p>
                                <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/09_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/10_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/11_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/12_card.png"></div> 
            </div>
            <div id="pane4" class="tab-pane">
              <p>170 Results Founds</p>
                                <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/01_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/02_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/03_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/04_card.png"></div> 
            </div>
            <div id="pane5" class="tab-pane">
              <p>256 Results Founds</p>
                                <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/01_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/02_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/03_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img src="http://www.onvia.com/responsive/04_card.png"></div> 
            </div>
          </div><!-- /.tab-content -->
        </div><!-- /.tabbable -->
        </div>

    </div>
    <!-- /.container -->
</div>
<!-- /.content-section-c -->

Upvotes: 2

Views: 6638

Answers (4)

Vucko
Vucko

Reputation: 20844

/* add bold font style and border bottom to active li elements */
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 3px solid #e9a39c;
    font-weight: bold;
}

/* remove the "grey" border when hovering the li elements */
.nav-tabs>li>a:hover{
    border: 1px solid transparent;
}

/* remove the "grey" background colour when hovering the li elements */
.nav>li>a:focus, .nav>li>a:hover{
    background-color: transparent;
}

Bootply

Update:

.nav-tabs{
    border-bottom: none; /* remove the "grey" underline from ul */
    display: inline-block; /* needed to center the list items */
}

.tabbable{
     text-align: center; /* center the list items */
}

Bootply

Upvotes: 4

Pugazh
Pugazh

Reputation: 9561

Ad this to your CSS. Updated bootply

ul.nav-tabs li a:hover{
  border-color: transparent;
  background-color: transparent;
  margin-bottom: -3px;
  border-bottom: 3px solid green;

}

ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover, ul.nav-tabs li.active a:focus, ul.nav-tabs li.active a:active{
  border-color: transparent;
  margin-bottom: -3px;
  border-bottom: 3px solid green;
}

Upvotes: 0

Nutshell
Nutshell

Reputation: 8537

I changed the float: left into display:inline-block and vertical-align:bottom to make li fits with the bottom border.

And I've made the changes you wanted : 

.nav-tabs>li{
    vertical-align: bottom;
    display: inline-block;
    float: none;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
    border: none;
    border-bottom: 3px solid #e9a39c;
    font-weight:bold;
    background: transparent;
}

Here's the fiddle

Upvotes: 0

satya
satya

Reputation: 1185

Please try this:

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
  color: #555;
  cursor: default;
  background-color: #fff;
  font-weight: bold;
  border-bottom: 3px solid #e9a39c;
}

Upvotes: 0

Related Questions