Tabs

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.

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.

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.

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

Tabs

Tabs

Unlock Your Career with AKS University