Bootstrap 3 Tabs - Spreading Tab's width 100%

A

admin

Administrator
Staff member
Here's the <a href="http://jsfiddle.net/krish7878/16yak3Lv/" rel="nofollow">fiddle</a>

I am trying to make a simple 'recent posts' container similar to wordpress widget like <a href="http://timekill.in/Capture.PNG" rel="nofollow">this</a>

The problem is I can't get the tabs to occupy full width and there some space left on the right side of each tab, I've tried to increase the padding but it's not accurate, also tried adding &nbsp; but even that didn't work.

Any help would be appreciated.

HTML Code:

Code: 
&lt;div class="container"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-lg-5 col-md-5 col-sm-5"&gt;
            &lt;ul class="nav nav-tabs" role="tablist"&gt;
                &lt;li class="active"&gt;
                    &lt;a href="#popular" role="tab" data-toggle="tab"&gt;
                    Popular
                    &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="#recent" role="tab" data-toggle="tab"&gt;
                    Recent
                    &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="#comments" role="tab" data-toggle="tab"&gt;
                    Comments
                    &lt;/a&gt;
                &lt;/li&gt;
                &lt;/ul&gt;&lt;!-- /.nav-tabs --&gt;
                &lt;!-- Tab panes --&gt;
                &lt;div class="tab-content"&gt;
                    &lt;div class="tab-pane fade in active" id="popular"&gt;
                        &lt;ul class="popular-list list-normal"&gt;
                            &lt;li&gt;
                                &lt;div class="text"&gt;
                                    &lt;a href="#"&gt;Sample Title for a Post &lt;/a&gt;
                                    &lt;p class="meta"&gt;
                                &lt;/div&gt;&lt;!-- /.text --&gt;
                                &lt;div class="image"&gt;
                                &lt;/div&gt;&lt;!-- /.image --&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;&lt;!-- /.popular-list --&gt;
                    &lt;/div&gt;&lt;!-- /.tab-pane --&gt;
                    &lt;div class="tab-pane fade" id="recent"&gt;
                        Some Content Will obviously come here
                    &lt;/div&gt;&lt;!-- /.tab-pane --&gt;
                    &lt;div class="tab-pane fade" id="comments"&gt;
                        Some Content Will obviously come here
                    &lt;/div&gt;&lt;!-- /.tab-pane --&gt;
                &lt;/div&gt;&lt;!-- /.tab-content --&gt;
        &lt;/div&gt;&lt;!-- /.col-5 --&gt;
    &lt;/div&gt;&lt;!-- /.row --&gt;
&lt;/div&gt;&lt;!-- /.container --&gt;
 
You must log in or register to reply here.