Tabs

Note: The markup that can be copied to your clipboard from this page is utilizing the latest Bootstrap 5.2.2 library markup. If your project is currently using the previous Bootstrap 4.6.2 library, you must replace any "data-bs-" attribute with "data-". The "-bs" attribute addition applies to Boostrap 5.2.2 only so as to not collide with other Javascript frameworks that may also utilize "data" attributes.

Example: Nav Lines

Tab 01 Content

Tab 02 Content

Tab 03 Content

Copy

                                    
                                        <ul class="nav nav-tabs nav-lines" id="tabID" role="tablist">

                                        <li class="nav-item"><a href="#navLines01" target="_self" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navLines01" aria-controls="navLines01" aria-selected="true">Tab 01</a></li>

                                        <li class="nav-item"><a href="#navLines02" target="_self" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navLines02" aria-controls="navLines02" aria-selected="false">Tab 02</a></li>

                                        <li class="nav-item"><a href="#navLines03" target="_self" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navLines03" aria-controls="navLines03" aria-selected="false">Tab 03</a></li>

                                        </ul>

                                        <div class="tab-content">

                                        <!-- TAB 01 CONTENT -->

                                        <div class="tab-pane fade show active" id="navLines01" role="tabpanel" aria-labelledby="navLines01" tabindex="0">...</div>

                                        <!-- TAB 02 CONTENT -->

                                        <div class="tab-pane fade" id="navLines02" role="tabpanel" aria-labelledby="navLines02" tabindex="0">...</div>

                                        <!-- TAB 03 CONTENT -->

                                        <div class="tab-pane fade" id="navLines03" role="tabpanel" aria-labelledby="navLines03" tabindex="0">...</div>

                                        </div>

Example: Nav Lines (Large Size)

Tab 01 Content

Tab 02 Content

Tab 03 Content

Copy

                                    
                                        <ul class="nav nav-tabs nav-lines-large" id="tabID" role="tablist">...</ul>

Example: Nav Pills

Tab 01 Content

Tab 02 Content

Tab 03 Content

Copy

                                    
                                        <ul class="nav nav-pills" id="tabID" role="tablist">

                                        <li class="nav-item"><a href="#navPills01" target="_self" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navPills01" aria-controls="navPills01" aria-selected="true">Tab 01</a></li>

                                        <li class="nav-item"><a href="#navPills02" target="_self" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navPills02" aria-controls="navPills02" aria-selected="false">Tab 02</a></li>

                                        <li class="nav-item"><a href="#navPills03" target="_self" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navPills03" aria-controls="navPills03" aria-selected="false">Tab 03</a></li>

                                        </ul>

                                        <div class="tab-content">

                                        <!-- TAB 01 CONTENT -->

                                        <div class="tab-pane fade show active" id="navPills01" role="tabpanel" aria-labelledby="navPills01" tabindex="0">...</div>

                                        <!-- TAB 02 CONTENT -->

                                        <div class="tab-pane fade" id="navPills02" role="tabpanel" aria-labelledby="navPills02" tabindex="0">...</div>

                                        <!-- TAB 03 CONTENT -->

                                        <div class="tab-pane fade" id="navPills03" role="tabpanel" aria-labelledby="navPills03" tabindex="0">...</div>

                                        </div>

Example: Nav Tabs

Tab 01 Content

Tab 02 Content

Tab 03 Content

Copy

                                    
                                        <ul class="nav nav-tabs" id="tabID" role="tablist">

                                        <li class="nav-item"><a href="#navTabs01" target="_self" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navTabs01" aria-controls="navTabs01" aria-selected="true">Tab 01</a></li>

                                        <li class="nav-item"><a href="#navTabs02" target="_self" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navTabs02" aria-controls="navTabs02" aria-selected="false">Tab 02</a></li>

                                        <li class="nav-item"><a href="#navTabs03" target="_self" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navTabs03" aria-controls="navTabs03" aria-selected="false">Tab 03</a></li>

                                        </ul>

                                        <div class="tab-content">

                                        <!-- TAB 01 CONTENT -->

                                        <div class="tab-pane fade show active" id="navTabs01" role="tabpanel" aria-labelledby="navTabs01" tabindex="0">...</div>

                                        <!-- TAB 02 CONTENT -->

                                        <div class="tab-pane fade" id="navTabs02" role="tabpanel" aria-labelledby="navTabs02" tabindex="0">...</div>

                                        <!-- TAB 03 CONTENT -->

                                        <div class="tab-pane fade" id="navTabs03" role="tabpanel" aria-labelledby="navTabs03" tabindex="0">...</div>

                                        </div>

Example: Nav Tabs (Justified)

Tab 01 Content

Tab 02 Content

Tab 03 Content

Copy

                                    
                                        <ul class="nav nav-tabs nav-justified" id="tabID" role="tablist">...</ul>