-1

I'd like my five bootstrap nav tabs to be spread out evenly across the containers. Currently they are in the middle, but there is so much blank space on the left and right sides of the tabs.

Also, for my result text, on mobile is butted up against the left side of the screen with no space. I would like this lined up with the left side of the cards. But it's too far over on the left.

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

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<br>&nbsp;</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 class="results">126 Results Founds</p>
            <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
                                                  </div>
            <div id="pane2" class="tab-pane">
            <p class="results">75 Results Founds</p>
            <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/05_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/06_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/07_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/08_card.png"></div> 
            </div>
            <div id="pane3" class="tab-pane">
              <p class="results">144 Results Founds</p>
                                <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/09_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/10_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/11_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/12_card.png"></div> 
            </div>
            <div id="pane4" class="tab-pane">
              <p class="results">170 Results Founds</p>
                                <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
            </div>
            <div id="pane5" class="tab-pane">
              <p class="results">256 Results Founds</p>
                                <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div>
            <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div>
             <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
            </div>
          </div><!-- /.tab-content -->
        </div><!-- /.tabbable -->
        </div>

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

Here's my css:

    .content-section-c {
    padding: 50px 0;
    background-color: #d4d4d4;
}

h2 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: #3C5A78;
    line-height: 1;
    text-align:center;
    padding: 0 0 16px 0;
}

.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;
 background-color: #d4d4d4 !important; 
}

.nav-tabs>li>a:hover{
  border: 1px solid transparent;
}

.nav>li>a:focus, .nav>li>a:hover{
    background-color: #d4d4d4;
}

.nav-tabs{
    border-bottom: none;
    display: inline-block; /* needed to center the list items */
}

.tabbable{
     text-align: center;
}

.results {
    font-family: 'Merriweather', serif;
    font-weight: 300;
    color: #355A78;
    font-size: 16px;
    margin: 20px 0 5px 0;
    text-align: left;
}
user3075987
  • 873
  • 2
  • 15
  • 32
  • If m not wrong you asked with same example yesterday while asking to remove border and giving color, right? – Leo the lion Apr 14 '16 at 06:00
  • Yes, that is correct. It's a complicated bootstrap tab that isn't working very well for me. – user3075987 Apr 14 '16 at 06:01
  • ok, listen to make it wider, use 100% on ul and then give 20% to each tab as you have five..it works like that.. – Leo the lion Apr 14 '16 at 06:03
  • 1
    Can you show me in bootply? – user3075987 Apr 14 '16 at 06:08
  • Also, for my result text, on mobile is butted up against the left side of the screen with no space. I would like this lined up with the left side of the cards. But it's too far over on the left. – user3075987 Apr 14 '16 at 06:09
  • Currently they are in the middle, but there is so much blank space on the left and right sides of the tabs... How do you want them to be spread out? – Satej S Apr 14 '16 at 06:41
  • 1
    @SatejS, i already gave the solution but he is not checking and posting this issue in all question. – Leo the lion Apr 14 '16 at 06:45
  • Can you show me in bootply how you do this? ok, listen to make it wider, use 100% on ul and then give 20% to each tab as you have five..it works like that. – user3075987 Apr 14 '16 at 06:56

2 Answers2

2

Ok, this will not be a small answer but it could help you on your way understanding where you're problems are.

First of all i see some misuse of the Bootstrap code and wrappers:

  1. You have one container <div class="container"> on the second line that wraps all of you're code. That works but it's not really the purpose of a container to wrap all of you're code. You allready have a wrapper <div class="content-section-c"> so why use a second one, or in you're example even a third one <div class="tabbable">?

  2. When you use <div class="container"> you will be limited to the width of a container and that is maximum 1170px. So that is why you're having that much margin left and right of the navigation. Bootstrap have a class container-fluid <div class="container-fluid"> that takes the full width of the screen. So in you're example i would use that class for your navigation section

Fixing you're code with my comments above you could change the navigation to this: 

<div class="content-section-c">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <h2>Sample Search Results</h2>
        <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<br>&nbsp;</a>
          </li>
          <li>
            <a href="#pane4" data-toggle="tab">GRAPE<br> TREES</a>
          </li> 
        </ul>
      </div>
    </div>
  </div>

Now the navigation bar is pulled to the left side, that is normal behaviour because you did not set any with to the ul and li so changing the css a bid will fix that to

.content-section-c {
    padding: 50px 0;
    background-color: #d4d4d4;
    text-align: center;
}

.content-section-c ul {
    width: 100%  
}

.content-section-c ul li {
  margin: 3%;
  width: 14%;

}

To explain above css in detail, first of all you had a class .tabbable {text-align: center;} but we removed that wrapper (because you allready had one) Now you have to add that style text-align:center to the wrapper we kept content-section-c.

Give the ul a width of 100% so it takes all of the width.

You could give the li a width of 20%, because you use underlining of active list items the line underneath would actually take 20% and that's not really nice. So i did some css trick and added some margin on the list items.

Attention you will need to use some @media queries to drop that margin on smaller screens

That was actually the question you had isn't it? Still to give you some extra tips and information i can tell you this:

A bootstrap container is actually a container of row elements and a bootstrap row is actually a container of columns col-*-*

Source: when-should-i-use-class-container-and-row

So if you look at the rest of you're code you could do something like this. Put every (column) group inside of a row. 

  <div class="tab-content">
     <div class="container">
       <div class="row">
         <div id="pane1" class="tab-pane active">
            <p class="results">126 Results Founds</p>
            <div class="col-md-6 col-xs-12">
               <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png">
            </div>
            <div class="col-md-6 col-xs-12">
               <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png">
            </div>
            <div class="col-md-6 col-xs-12">
               <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png">
            </div>
            <div class="col-md-6 col-xs-12">
                <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png">
            </div> 
         </div>
       </div>

And here you have a bootply with you're previous code cleaned up, good luck!

Bootply

Community
  • 1
  • 1
Peter
  • 1,240
  • 2
  • 13
  • 22
-1

I correct it. Hope you want like this.

/* CSS used here will be applied after bootstrap.css */

.content-section-c {
    padding: 50px 0;
    background-color: #d4d4d4;
}

h2 {
 font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: #3C5A78;
    line-height: 1;
    text-align:center;
    padding: 0 0 16px 0;
}

.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;
 background-color: #d4d4d4 !important; 
}

.nav-tabs>li>a:hover{
  border: 1px solid transparent;
}

.nav>li>a:focus, .nav>li>a:hover{
 background-color: #d4d4d4;
}

.nav-tabs{
    border-bottom: none;
    display: inline-block; /* needed to center the list items */
}

.tabbable{
     text-align: center;
}

.results {
    font-family: 'Merriweather', serif;
    font-weight: 300;
    color: #355A78;
    font-size: 16px;
    margin: 20px 0 5px 0;
    text-align: left;
}
ul.nav{
  width:100%;
}
.nav-tabs>li {
    width: 20%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <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<br>&nbsp;</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 class="results">126 Results Founds</p>
                <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div>
                <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div>
                 <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div>
                 <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
                                                      </div>
                <div id="pane2" class="tab-pane">
                <p class="results">75 Results Founds</p>
                <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/05_card.png"></div>
                <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/06_card.png"></div>
                 <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/07_card.png"></div>
                 <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/08_card.png"></div> 
                </div>
                <div id="pane3" class="tab-pane">
                  <p class="results">144 Results Founds</p>
                                    <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/09_card.png"></div>
                <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/10_card.png"></div>
                 <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/11_card.png"></div>
                 <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/12_card.png"></div> 
                </div>
                <div id="pane4" class="tab-pane">
                  <p class="results">170 Results Founds</p>
                                    <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div>
                <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div>
                 <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div>
                 <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
                </div>
                <div id="pane5" class="tab-pane">
                  <p class="results">256 Results Founds</p>
                                    <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/01_card.png"></div>
                <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/02_card.png"></div>
                 <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png"></div>
                 <div class="col-md-6 col-xs-12">
                    <img class="img-responsive" src="http://www.onvia.com/responsive/04_card.png"></div> 
                </div>
              </div><!-- /.tab-content -->
            </div><!-- /.tabbable -->
            </div>

        </div>
        <!-- /.container -->
    </div>
    <!-- /.content-section-c -->
Sagar Kodte
  • 3,723
  • 4
  • 23
  • 52