<section id="dt-content" class="sec-pt-lg">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2>Style 1</h2>
                <ul class="nav nav-tabs" id="horizontalTab" role="tablist">
                    <li class="nav-item" role="presentation">
                    <a class="nav-link active" id="tab-one" data-bs-toggle="tab" href="#tabOne" role="tab" aria-controls="tabOne" aria-selected="true">Tab 1</a>
                    </li>
                    <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-two" data-bs-toggle="tab" href="#tabTwo" role="tab" aria-controls="tabTwo" aria-selected="false">Tab 2</a>
                    </li>
                    <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-three" data-bs-toggle="tab" href="#tabThree" role="tab" aria-controls="tabThree" aria-selected="false">Tab 3</a>
                    </li>
                </ul>
                <div class="tab-content" id="horizontalTabContent">
                    <div class="tab-pane fade show active" id="tabOne" role="tabpanel" aria-labelledby="tabOne"><p>Vestibulum ante erat, cursus sed neque quis, mattis dignissim tellus. Ut faucibus venenatis libero mollis blandit. Ut quis lectus in mauris ornare egestas. Donec a nunc egestas, lacinia nisl id, congue nulla. Sed iaculis finibus risus eget pulvinar. Vestibulum aliquet justo magna, vitae fringilla libero hendrerit quis. Maecenas enim turpis, finibus ac ornare eget, interdum et ex.</p><p>Cras at mi sed magna varius pulvinar et ac arcu. Suspendisse eros lorem, sagittis quis rhoncus in, bibendum vel justo. Integer tristique mi eu arcu ultricies molestie. Pellentesque vehicula tortor non dui dictum, non varius arcu pulvinar. Vestibulum sit amet ullamcorper elit, sed sodales orci. Suspendisse at sapien sed sapien cursus pretium.</p><p>Donec leo ante, pellentesque sed blandit ac, vulputate eget augue. Cras quis tincidunt nisi, eget mattis massa. Nullam auctor ullamcorper lacus sit amet aliquet. Nulla sodales maximus imperdiet. Donec sagittis sem sed nunc finibus, nec facilisis mi tempor. Maecenas rutrum magna quis elementum euismod.</p></div>
                    <div class="tab-pane fade" id="tabTwo" role="tabpanel" aria-labelledby="tabTwo"><p>Vestibulum ante erat, cursus sed neque quis, mattis dignissim tellus. Ut faucibus venenatis libero mollis blandit. Ut quis lectus in mauris ornare egestas. Donec a nunc egestas, lacinia nisl id, congue nulla. Sed iaculis finibus risus eget pulvinar. Vestibulum aliquet justo magna, vitae fringilla libero hendrerit quis. Maecenas enim turpis, finibus ac ornare eget, interdum et ex.</p><p>Cras at mi sed magna varius pulvinar et ac arcu. Suspendisse eros lorem, sagittis quis rhoncus in, bibendum vel justo. Integer tristique mi eu arcu ultricies molestie. Pellentesque vehicula tortor non dui dictum, non varius arcu pulvinar. Vestibulum sit amet ullamcorper elit, sed sodales orci. Suspendisse at sapien sed sapien cursus pretium.</p><p>Donec leo ante, pellentesque sed blandit ac, vulputate eget augue. Cras quis tincidunt nisi, eget mattis massa. Nullam auctor ullamcorper lacus sit amet aliquet. Nulla sodales maximus imperdiet. Donec sagittis sem sed nunc finibus, nec facilisis mi tempor. Maecenas rutrum magna quis elementum euismod.</p></div>
                    <div class="tab-pane fade" id="tabThree" role="tabpanel" aria-labelledby="tabThree"><p>Vestibulum ante erat, cursus sed neque quis, mattis dignissim tellus. Ut faucibus venenatis libero mollis blandit. Ut quis lectus in mauris ornare egestas. Donec a nunc egestas, lacinia nisl id, congue nulla. Sed iaculis finibus risus eget pulvinar. Vestibulum aliquet justo magna, vitae fringilla libero hendrerit quis. Maecenas enim turpis, finibus ac ornare eget, interdum et ex.</p><p>Cras at mi sed magna varius pulvinar et ac arcu. Suspendisse eros lorem, sagittis quis rhoncus in, bibendum vel justo. Integer tristique mi eu arcu ultricies molestie. Pellentesque vehicula tortor non dui dictum, non varius arcu pulvinar. Vestibulum sit amet ullamcorper elit, sed sodales orci. Suspendisse at sapien sed sapien cursus pretium.</p><p>Donec leo ante, pellentesque sed blandit ac, vulputate eget augue. Cras quis tincidunt nisi, eget mattis massa. Nullam auctor ullamcorper lacus sit amet aliquet. Nulla sodales maximus imperdiet. Donec sagittis sem sed nunc finibus, nec facilisis mi tempor. Maecenas rutrum magna quis elementum euismod.</p></div>
                </div>
            </div>
        </div>
    </div>
</section>
                        Copy to clipboard
                    

                        
<section id="dt-content" class="sec-pt-lg">
    <div class="container">
        <div class="row">
             <div class="col-12">
                <h2>Style 2</h2>
                <div class="row">
                    <div class="col-12 col-md-2 vertical-tab-pills">
                        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            <a class="nav-link active" id="v-pills-tab-one" data-bs-toggle="pill" href="#v-pills-one" role="tab" aria-controls="v-pills-one" aria-selected="true">Tab 1</a>
                            <a class="nav-link" id="v-pills-tab-two" data-bs-toggle="pill" href="#v-pills-two" role="tab" aria-controls="v-pills-two" aria-selected="false">Tab 2</a>
                            <a class="nav-link" id="v-pills-tab-three" data-bs-toggle="pill" href="#v-pills-three" role="tab" aria-controls="v-pills-three" aria-selected="false">Tab 3</a>
                        </div>
                    </div>
                    <div class="col-12 col-md-10 vertical-tab-content">
                        <div class="tab-content styled" id="v-pills-tabContent">
                            <div class="tab-pane fade show active" id="v-pills-one" role="tabpanel" aria-labelledby="v-pills-tab-one"><p>Vestibulum ante erat, cursus sed neque quis, mattis dignissim tellus. Ut faucibus venenatis libero mollis blandit. Ut quis lectus in mauris ornare egestas. Donec a nunc egestas, lacinia nisl id, congue nulla. Sed iaculis finibus risus eget pulvinar. Vestibulum aliquet justo magna, vitae fringilla libero hendrerit quis. Maecenas enim turpis, finibus ac ornare eget, interdum et ex.</p><p>Cras at mi sed magna varius pulvinar et ac arcu. Suspendisse eros lorem, sagittis quis rhoncus in, bibendum vel justo. Integer tristique mi eu arcu ultricies molestie. Pellentesque vehicula tortor non dui dictum, non varius arcu pulvinar. Vestibulum sit amet ullamcorper elit, sed sodales orci. Suspendisse at sapien sed sapien cursus pretium.</p><p>Donec leo ante, pellentesque sed blandit ac, vulputate eget augue. Cras quis tincidunt nisi, eget mattis massa. Nullam auctor ullamcorper lacus sit amet aliquet. Nulla sodales maximus imperdiet. Donec sagittis sem sed nunc finibus, nec facilisis mi tempor. Maecenas rutrum magna quis elementum euismod.</p></div>
                            <div class="tab-pane fade" id="v-pills-two" role="tabpanel" aria-labelledby="v-pills-tab-two"><p>Vestibulum ante erat, cursus sed neque quis, mattis dignissim tellus. Ut faucibus venenatis libero mollis blandit. Ut quis lectus in mauris ornare egestas. Donec a nunc egestas, lacinia nisl id, congue nulla. Sed iaculis finibus risus eget pulvinar. Vestibulum aliquet justo magna, vitae fringilla libero hendrerit quis. Maecenas enim turpis, finibus ac ornare eget, interdum et ex.</p><p>Cras at mi sed magna varius pulvinar et ac arcu. Suspendisse eros lorem, sagittis quis rhoncus in, bibendum vel justo. Integer tristique mi eu arcu ultricies molestie. Pellentesque vehicula tortor non dui dictum, non varius arcu pulvinar. Vestibulum sit amet ullamcorper elit, sed sodales orci. Suspendisse at sapien sed sapien cursus pretium.</p><p>Donec leo ante, pellentesque sed blandit ac, vulputate eget augue. Cras quis tincidunt nisi, eget mattis massa. Nullam auctor ullamcorper lacus sit amet aliquet. Nulla sodales maximus imperdiet. Donec sagittis sem sed nunc finibus, nec facilisis mi tempor. Maecenas rutrum magna quis elementum euismod.</p></div>
                            <div class="tab-pane fade" id="v-pills-three" role="tabpanel" aria-labelledby="v-pills-tab-three"><p>Vestibulum ante erat, cursus sed neque quis, mattis dignissim tellus. Ut faucibus venenatis libero mollis blandit. Ut quis lectus in mauris ornare egestas. Donec a nunc egestas, lacinia nisl id, congue nulla. Sed iaculis finibus risus eget pulvinar. Vestibulum aliquet justo magna, vitae fringilla libero hendrerit quis. Maecenas enim turpis, finibus ac ornare eget, interdum et ex.</p><p>Cras at mi sed magna varius pulvinar et ac arcu. Suspendisse eros lorem, sagittis quis rhoncus in, bibendum vel justo. Integer tristique mi eu arcu ultricies molestie. Pellentesque vehicula tortor non dui dictum, non varius arcu pulvinar. Vestibulum sit amet ullamcorper elit, sed sodales orci. Suspendisse at sapien sed sapien cursus pretium.</p><p>Donec leo ante, pellentesque sed blandit ac, vulputate eget augue. Cras quis tincidunt nisi, eget mattis massa. Nullam auctor ullamcorper lacus sit amet aliquet. Nulla sodales maximus imperdiet. Donec sagittis sem sed nunc finibus, nec facilisis mi tempor. Maecenas rutrum magna quis elementum euismod.</p></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
                        Copy to clipboard