Tabs

<div class="card mt-3 tab-card">
    <div class="card-header tab-card-header">
        <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
            <li class="nav-item" data-once="openLeftBehavior"><a class="nav-link active" href="#one" aria-controls="One"
                    aria-selected="true" data-toggle="tab" id="one-tab" role="tab">Tab 1</a>
            </li>
            <li class="nav-item" data-once="openLeftBehavior"><a class="nav-link" href="#two" aria-controls="Two"
                    aria-selected="false" data-toggle="tab" id="two-tab" role="tab">Tab 2</a></li>
            <li class="nav-item" data-once="openLeftBehavior"><a class="nav-link" href="#three" aria-controls="Three"
                    aria-selected="false" data-toggle="tab" id="three-tab" role="tab">Tab
                    3</a></li>
        </ul>
    </div>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active p-3" aria-labelledby="one-tab" id="one" role="tabpanel">
            <p class="card-text">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 class="card-text">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 class="card-text">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 p-3" aria-labelledby="two-tab" id="two" role="tabpanel">
            <p class="card-text">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 class="card-text">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 class="card-text">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 p-3" aria-labelledby="three-tab" id="three" role="tabpanel">
            <p class="card-text">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 class="card-text">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 class="card-text">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>

Copy to clipboard

<div class="row yg-tab-content">
    <div class="col-12 col-sm-12 col-md-3 col-lg-2 p-0">
        <div class="yg-tab-card-header">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" data-once="openLeftBehavior"><a class="nav-link active" href="#v-one"
                        aria-controls="One" aria-selected="false" data-toggle="tab" id="v-one-tab" role="tab">Tab
                        1</a></li>
                <li class="nav-item" data-once="openLeftBehavior"><a class="nav-link" href="#v-two" aria-controls="Two"
                        aria-selected="false" data-toggle="tab" id="v-two-tab" role="tab">Tab
                        2</a></li>
                <li class="nav-item" data-once="openLeftBehavior"><a class="nav-link" href="#v-three"
                        aria-controls="Three" aria-selected="false" data-toggle="tab" id="v-three-tab" role="tab">Tab
                        3</a></li>
            </ul>
        </div>
    </div>
    <div class="col-12 col-sm-12 col-md-9 col-lg-10 p-0">
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane show active fade" aria-labelledby="one-tab" id="v-one" role="tabpanel">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="yg-tab-content-wrapper">
                            <p class="card-text">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 class="card-text">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 class="card-text">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 class="tab-pane fade" aria-labelledby="two-tab" id="v-two" role="tabpanel">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="yg-tab-content-wrapper">
                            <p class="card-text">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 class="card-text">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 class="card-text">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 class="tab-pane fade" aria-labelledby="three-tab" id="v-three" role="tabpanel">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="yg-tab-content-wrapper">
                            <p class="card-text">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 class="card-text">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 class="card-text">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>
                                

Copy to clipboard