<div class="row">
                        <div class="col">
                            <hr class="tall">
                            <h4>Justified</h4>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="tabs">
                                <ul class="nav nav-tabs nav-justified flex-column flex-md-row">
                                    <li class="nav-item active">
                                        <a class="nav-link" href="#popular10" data-toggle="tab" class="text-center"><i class="fas fa-star"></i> Popular</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#recent10" data-toggle="tab" class="text-center">Recent</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div id="popular10" class="tab-pane active">
                                        <p>Popular</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
                                    </div>
                                    <div id="recent10" class="tab-pane">
                                        <p>Recent</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
                                    </div>
                                </div>
                            </div>
                        </div>


<div class="row">
                        <div class="col">
                            <hr class="tall">
                            <h4>Vertical</h4>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="tabs tabs-vertical tabs-left">
                                <ul class="nav nav-tabs">
                                    <li class="nav-item active">
                                        <a class="nav-link" href="#popular11" data-toggle="tab">Popular</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#recent11" data-toggle="tab">Recent</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div id="popular11" class="tab-pane active">
                                        <p>Popular</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
                                    </div>
                                    <div id="recent11" class="tab-pane">
                                        <p>Recent</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
                                    </div>
                                </div>
                            </div>
                        </div>