Bootstrap 4 Vertical Tabs Responsive Example

Today, We want to share with you bootstrap 4 vertical tabs responsive.In this post we will show you How To Create Vertical Tabs, hear for Bootstrap 4 vertical tabs responsive example is created by using bootstrap and some custom HTML and CSS. we will give you demo and example for implement.In this post, we will learn about Bootstrap Vertical Carousel Slider With JQuery Example with an example.

Bootstrap 4 Vertical Nav Tabs Snippet

Add HTML Code (index.html)

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>How To Create Bootstrap 4 Vertical Tabs Responsive Example - www.pakainfo.com</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
      <!-- Bootstrap CDN JS Links -->
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
   </head>
   <body>
      <section class="tabs-section text-white">
         <div class="container">
            <div class="row">
               <div class="col-sm-5 col-lg-3">
                  <ul class="nav nav-tabs flex-column mb-3">
                     <li class="nav-item">
                        <a class="nav-link active show" data-toggle="tab" href="#tab-1">What is SEO?</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-2">What is TamilRokers?</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-3">What is Laravel?</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-4">What is PHP?</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-5">What is Angularjs?</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-6">What is Vuejs?</a>
                     </li>
                  </ul>
               </div>
               <div class="col-sm-7 col-lg-9">
                  <div class="tab-content">
                     <div class="tab-pane active show" id="tab-1">
                        <div class="row">
                           <div class="col-lg-4">
                              <div class="feature-img">
                                 <img src="medialibrary/client-img-3.jpg" alt="" class="img-fluid">
                              </div>
                           </div>
                           <div class="col-lg-8 details">
                              <h3 class="mt-3">What is intent?</h3>
                              <p>It is a kind of message or information that is passed to the components. It is used to launch an activity, display a web page, send SMS, send email, etc.</p>
                           </div>
                        </div>
                     </div>
                     <div class="tab-pane" id="tab-2">
                        <div class="row">
                           <div class="col-lg-4">
                              <div class="feature-img">
                                 <img src="medialibrary/client-img-2.jpg" alt="" class="img-fluid">
                              </div>
                           </div>
                           <div class="col-lg-8 details">
                              <h3 class="mt-3">What is Android?</h3>
                              <p class="font-italic">Android is an open-source, Linux-based operating system used in mobiles, tablets, televisions, etc.</p>
                           </div>
                        </div>
                     </div>
                     <div class="tab-pane" id="tab-3">
                        <div class="row">
                           <div class="col-lg-4">
                              <div class="feature-img">
                                 <img src="medialibrary/client-img-1.jpg" alt="" class="img-fluid">
                              </div>
                           </div>
                           <div class="col-lg-8 details">
                              <h3 class="mt-3">What is the deadlock?</h3>
                              <p>Deadlock is a situation in which every thread is waiting for a resource which is held by some other waiting thread. In this situation, Neither of the thread executes nor it gets the chance to be executed. Instead, there exists a universal waiting state among all the threads. Deadlock is a very complicated situation which can break our code at runtime.</p>
                           </div>
                        </div>
                     </div>
                     <div class="tab-pane" id="tab-4">
                        <div class="row">
                           <div class="col-lg-4">
                              <div class="feature-img">
                                 <img src="medialibrary/client-img-3.jpg" alt="" class="img-fluid">
                              </div>
                           </div>
                           <div class="col-lg-8 details">
                              <h3 class="mt-3">What is the thread?</h3>
                              <p>A thread is a lightweight subprocess. It is a separate path of execution because each thread runs in a different stack frame. A process may contain multiple threads. Threads share the process resources, but still, they execute independently.</p>
                           </div>
                        </div>
                     </div>
                     <div class="tab-pane" id="tab-5">
                        <div class="row">
                           <div class="col-lg-4">
                              <div class="feature-img">
                                 <img src="medialibrary/client-img-2.jpg" alt="" class="img-fluid">
                              </div>
                           </div>
                           <div class="col-lg-8 details">
                              <h3 class="mt-3">What is JSP?</h3>
                              <p>Java Server Pages technology (JSP) is a server-side programming language used to create a dynamic web page in the form of HyperText Markup Language (HTML). It is an extension to the servlet technology.</p>
                           </div>
                        </div>
                     </div>
                     <div class="tab-pane" id="tab-6">
                        <div class="row">
                           <div class="col-lg-4">
                              <div class="feature-img">
                                 <img src="medialibrary/client-img-1.jpg" alt="" class="img-fluid">
                              </div>
                           </div>
                           <div class="col-lg-8 details">
                              <h3 class="mt-3">What is Vuex?</h3>
                              <p>VueX is a state management pattern and library for the Vue.js application. It is used as a centralized store for all the different components in the Vue.js application. Vuex provides some rules to ensure that the state can only be mutated in a predictable fashion. You can get a lot of additional features by integrating Vuex with the official devtool extension of Vue.js.</p>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>
   </body>
</html>

Add CSS CODE

<style>
.tabs-section {
    overflow: hidden;
    background-color: #333;
    padding: 60px 0px;
}
.tabs-section .feature-img {
    max-height: 255px;
    overflow: hidden;
    border-radius: 10px;
    border: 3px solid #fff;
}
.tabs-section .nav-tabs {
    border: 0;
}
.tabs-section .nav-link {
    border: 0;
    padding: 11px 15px;
    transition: 0.3s;
    color: #fff;
    border-radius: 0;
    border-right: 2px solid #cddc39 !important;
    font-weight: 600;
    font-size: 15px;
}
.tabs-section .nav-link:hover {
    color: #cddc39;
}
.tabs-section .nav-link.active {
    color: #333333;
    background: #cddc39;
}
.tabs-section .nav-link:hover {
    border-right: 4px solid #cddc39;
}
.tabs-section .tab-pane.active {
    -webkit-animation: fadeIn 0.5s ease-out;
    animation: fadeIn 0.5s ease-out;
}
.tabs-section .details h3 {
    font-size: 26px;
    color: #cddc39;
}
.tabs-section .details p {
    color: #aaaaaa;
}
</style>

I hope you get an idea about Bootstrap Tabs and Pills.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.