Tabs

Tabbable panes.

Bootstrap Tabs documentation

Examples

You can utilize any of the Navs examples to make tabs.

First tab content...

Second tab content...

Third tab content...

                    
                      <!-- Nav -->
                      <div class="text-center">
                        <ul class="nav nav-segment nav-pills scrollbar-horizontal mb-7" role="tablist">
                          <li class="nav-item">
                            <a class="nav-link active" id="pills-one-code-features-example1-tab" data-toggle="pill" href="#pills-one-code-features-example1" role="tab" aria-controls="pills-one-code-features-example1" aria-selected="true">App Marketplace</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" id="pills-two-code-features-example1-tab" data-toggle="pill" href="#pills-two-code-features-example1" role="tab" aria-controls="pills-two-code-features-example1" aria-selected="false">Course</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" id="pills-three-code-features-example1-tab" data-toggle="pill" href="#pills-three-code-features-example1" role="tab" aria-controls="pills-three-code-features-example1" aria-selected="false">Account Dashboard</a>
                          </li>
                        </ul>
                      </div>
                      <!-- End Nav -->

                      <!-- Tab Content -->
                      <div class="tab-content">
                        <div class="tab-pane fade show active" id="pills-one-code-features-example1" role="tabpanel" aria-labelledby="pills-one-code-features-example1-tab">
                          <p>First tab content...</p>
                        </div>

                        <div class="tab-pane fade" id="pills-two-code-features-example1" role="tabpanel" aria-labelledby="pills-two-code-features-example1-tab">
                          <p>Second tab content...</p>
                        </div>

                        <div class="tab-pane fade" id="pills-three-code-features-example1" role="tabpanel" aria-labelledby="pills-three-code-features-example1-tab">
                          <p>Third tab content...</p>
                        </div>
                      </div>
                      <!-- End Tab Content -->
                    
                  

First tab content...

Second tab content...

Third tab content...

                    
                      <!-- Nav -->
                      <div class="text-center">
                        <ul class="nav nav-pills mb-7" role="tablist">
                          <li class="nav-item">
                            <a class="nav-link active" id="pills-one-code-features-example2-tab" data-toggle="pill" href="#pills-one-code-features-example2" role="tab" aria-controls="pills-one-code-features-example2" aria-selected="true">App Marketplace</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" id="pills-two-code-features-example2-tab" data-toggle="pill" href="#pills-two-code-features-example2" role="tab" aria-controls="pills-two-code-features-example2" aria-selected="false">Course</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" id="pills-three-code-features-example2-tab" data-toggle="pill" href="#pills-three-code-features-example2" role="tab" aria-controls="pills-three-code-features-example2" aria-selected="false">Account Dashboard</a>
                          </li>
                        </ul>
                      </div>
                      <!-- End Nav -->

                      <!-- Tab Content -->
                      <div class="tab-content">
                        <div class="tab-pane fade show active" id="pills-one-code-features-example2" role="tabpanel" aria-labelledby="pills-one-code-features-example2-tab">
                          <p>First tab content...</p>
                        </div>

                        <div class="tab-pane fade" id="pills-two-code-features-example2" role="tabpanel" aria-labelledby="pills-two-code-features-example2-tab">
                          <p>Second tab content...</p>
                        </div>

                        <div class="tab-pane fade" id="pills-three-code-features-example2" role="tabpanel" aria-labelledby="pills-three-code-features-example2-tab">
                          <p>Third tab content...</p>
                        </div>
                      </div>
                      <!-- End Tab Content -->
                    
                  
                    
                      <div class="row">
                        <div class="col-lg-5 mb-7 mb-lg-0">
                          <!-- Nav -->
                          <ul class="nav nav-box" role="tablist">
                            <li class="nav-item w-100 mx-0 mb-3">
                              <a class="nav-link p-4 active" id="pills-one-code-features-example3-tab" data-toggle="pill" href="#pills-one-code-features-example3" role="tab" aria-controls="pills-one-code-features-example3" aria-selected="true">
                                <div class="media align-items-center align-items-lg-start">
                                  <figure class="w-100 max-w-6rem mt-2 mr-4">
                                    <img class="img-fluid" src="../../assets/svg/icons/icon-45.svg" alt="SVG">
                                  </figure>
                                  <div class="media-body">
                                    <h4 class="mb-0">Easy & fast designing</h4>
                                    <div class="d-none d-lg-block mt-2">
                                      <p class="text-body mb-0">You can work with your existing website.</p>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            </li>

                            <li class="nav-item w-100 mx-0 mb-3">
                              <a class="nav-link p-4" id="pills-two-code-features-example3-tab" data-toggle="pill" href="#pills-two-code-features-example3" role="tab" aria-controls="pills-two-code-features-example3" aria-selected="false">
                                <div class="media align-items-center align-items-lg-start">
                                  <figure class="w-100 max-w-6rem mt-2 mr-4">
                                    <img class="img-fluid" src="../../assets/svg/icons/icon-23.svg" alt="SVG">
                                  </figure>
                                  <div class="media-body">
                                    <h4 class="mb-0">Powerful features</h4>
                                    <div class="d-none d-lg-block mt-2">
                                      <p class="text-body mb-0">Easily draft, change, customize and launch.</p>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            </li>

                            <li class="nav-item w-100 mx-0">
                              <a class="nav-link p-4" id="pills-three-code-features-example3-tab" data-toggle="pill" href="#pills-three-code-features-example3" role="tab" aria-controls="pills-three-code-features-example3" aria-selected="false">
                                <div class="media align-items-center align-items-lg-start">
                                  <figure class="w-100 max-w-6rem mt-2 mr-4">
                                    <img class="img-fluid" src="../../assets/svg/icons/icon-44.svg" alt="SVG">
                                  </figure>
                                  <div class="media-body">
                                    <h4 class="mb-0">Advanced HTML/CSS editing</h4>
                                    <div class="d-none d-lg-block mt-2">
                                      <p class="text-body mb-0">You can modify any aspect of your website.</p>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            </li>
                          </ul>
                          <!-- End Nav -->
                        </div>

                        <div class="col-lg-7">
                          <!-- Tab Content -->
                          <div class="tab-content">
                            <div class="tab-pane fade p-4 show active" id="pills-one-code-features-example3" role="tabpanel" aria-labelledby="pills-one-code-features-example3-tab">
                              <p>First tab content...</p>
                            </div>

                            <div class="tab-pane fade p-4" id="pills-two-code-features-example3" role="tabpanel" aria-labelledby="pills-two-code-features-example3-tab">
                              <p>Second tab content...</p>
                            </div>

                            <div class="tab-pane fade p-4" id="pills-three-code-features-example3" role="tabpanel" aria-labelledby="pills-three-code-features-example3-tab">
                              <p>Third tab content...</p>
                            </div>
                          </div>
                          <!-- End Tab Content -->
                        </div>
                      </div>