Bootstrap 3 Tabs - Spreading Tab's width 100%

Question

Here's the fiddle

I am trying to make a simple 'recent posts' container similar to wordpress widget like this

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   but even that didn't work.

Any help would be appreciated.

HTML Code:

<div class="container">
    <div class="row">
        <div class="col-lg-5 col-md-5 col-sm-5">
            <ul class="nav nav-tabs" role="tablist">
                <li class="active">
                    <a href="#popular" role="tab" data-toggle="tab">
                    Popular
                    </a>
                </li>
                <li>
                    <a href="#recent" role="tab" data-toggle="tab">
                    Recent
                    </a>
                </li>
                <li>
                    <a href="#comments" role="tab" data-toggle="tab">
                    Comments
                    </a>
                </li>
                </ul><!-- /.nav-tabs -->
                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="popular">
                        <ul class="popular-list list-normal">
                            <li>
                                <div class="text">
                                    <a href="#">Sample Title for a Post </a>
                                    <p class="meta">
                                </div><!-- /.text -->
                                <div class="image">
                                </div><!-- /.image -->
                            </li>
                        </ul><!-- /.popular-list -->
                    </div><!-- /.tab-pane -->
                    <div class="tab-pane fade" id="recent">
                        Some Content Will obviously come here
                    </div><!-- /.tab-pane -->
                    <div class="tab-pane fade" id="comments">
                        Some Content Will obviously come here
                    </div><!-- /.tab-pane -->
                </div><!-- /.tab-content -->
        </div><!-- /.col-5 -->
    </div><!-- /.row -->
</div><!-- /.container -->

Answer 1

Try this:

Use <ul class="list-group">,<li class="list-group-item">

DEMO

HTML:

<div class="container">
            <div class="row">
                <div class="col-lg-5 col-md-5 col-sm-5">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active">
                            <a href="#popular" role="tab" data-toggle="tab">Popular
                            </a>
                        </li>
                        <li>
                            <a href="#recent" role="tab" data-toggle="tab">Recent
                            </a>
                        </li>
                        <li>
                            <a href="#comments" role="tab" data-toggle="tab">Comments
                            </a>
                        </li>
                    </ul>
                    <!-- /.nav-tabs -->
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="popular">
                            <ul class="list-group popular-list list-normal">
                                <li class="list-group-item">
                                    <div class="text">
                                        <a href="#">Sample Title for a Post </a>
                                        <p class="meta">
                                    </div>
                                    <!-- /.text -->
                                    <div class="image">
                                    </div>
                                    <!-- /.image -->
                                </li>
                            </ul>
                            <!-- /.popular-list -->
                        </div>
                        <!-- /.tab-pane -->
                        <div class="tab-pane fade" id="recent">
                            Some Content Will obviously come here
                        </div>
                        <!-- /.tab-pane -->
                        <div class="tab-pane fade" id="comments">
                            Some Content Will obviously come here
                        </div>
                        <!-- /.tab-pane -->
                    </div>
                    <!-- /.tab-content -->
                </div>
                <!-- /.col-5 -->
            </div>
            <!-- /.row -->
        </div>