<div class="container"> <!-- Start of vertical tabs --> <div class="row"> <div class="col-3 no-gutters" style="padding-top: .25rem; padding-bottom: .25rem;"> <div class="nav flex-column nav-pills" id="v-tabs-tab" role="tablist" aria-orientation="vertical"> <a class="nav-link active show" id="v-tabs-t1-tab" data-toggle="pill" href="#v-tabs-t1" role="tab" aria-controls="v-tabs-t1" aria-selected="true">Tab 1 button name</a> <a class="nav-link" id="v-tabs-t2-tab" data-toggle="pill" href="#v-tabs-t2" role="tab" aria-controls="v-tabs-t2" aria-selected="false">Tab 2 button name</a> <a class="nav-link" id="v-tabs-t3-tab" data-toggle="pill" href="#v-tabs-t3" role="tab" aria-controls="v-tabs-t3" aria-selected="false">Tab 3 button name</a> <a class="nav-link" id="v-tabs-t4-tab" data-toggle="pill" href="#v-tabs-t4" role="tab" aria-controls="v-tabs-t4" aria-selected="false">Tab 4 button name</a> </div> </div> <div class="col-9 no-gutters"> <div class="tab-content" id="v-tabs-tabContent"> <div class="tab-pane card p-3 fade active show" id="v-tabs-t1" role="tabpanel" aria-labelledby="v-tabs-t1-tab"> <h4>Tab 1 card title</h4> <p>Tab 1 content goes here</p> </div> <div class="tab-pane card p-3 fade" id="v-tabs-t2" role="tabpanel" aria-labelledby="v-tabs-t2-tab"> <h4>Tab 2 card title</h4> <p>Tab 2 content goes here</p> </div> <div class="tab-pane card p-3 fade" id="v-tabs-t3" role="tabpanel" aria-labelledby="v-tabs-t3-tab"> <h4>Tab 3 card title</h4> <p>Tab 3 content goes here</p> </div> <div class="tab-pane card p-3 fade" id="v-tabs-t4" role="tabpanel" aria-labelledby="v-tabs-t4-tab"> <h4>Tab 4 card title</h4> <p>Tab 4 content goes here</p> </div> </div> </div> </div> <!-- End of vertical tabs --> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter