How to design Bootstrap Vertical Tab

How to design Bootstrap Vertical Tab?

Table of Contents

In this tutorial, we will learn How to design Bootstrap Vertical Tab using Bootstrap 5 and Javascript. Basically, Bootstrap Tabs is used to display the content on a single page web application or on a web page in an organized manner.

We can design vertical tabs using Bootstrap, HTML, CSS, and JavaScript. HTML elements are used to design the structure of the vertical tabs and their content in paragraphs <p> and using an <img src=””> Image tag to display the image. The styling is performed using bootstrap CSS. At the click of each Vertical Tab button, the tabs display their respective content.

Source Code and Live demo link for Vertical Tab are available at the bottom section

Bootstrap Vertical Tab

Before writing the HTML code we need to add the below Bootstrap CSS, JS library and font-awesome in the header section in index.html

CSS Library

<link href="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" target="_blank" rel="noreferrer noopener">https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css</a>" rel="stylesheet">
<link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" target="_blank" rel="noreferrer noopener">https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css</a>">
<link rel="stylesheet" type="text/css" href="css/styles.css">

JS Library

<script src="<a href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" target="_blank" rel="noreferrer noopener">https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js</a>" ></script> 
<script src="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" target="_blank" rel="noreferrer noopener">https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js</a>" ></script><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"></gwmw></gwmw><gwmw style="display:none;"></gwmw></gwmw></gwmw><gwmw style="display:none;"></gwmw></gwmw></gwmw></gwmw><gwmw style="display:none;">

The following HTML code used to design the simple HTML structure of Bootstrap Vertical Tab with tab buttons and its contents in the form of an image, heading and paragraph. The HTML code are:

HTML Code

<div class="d-flex bg-white flex-row shadow nav-border">
      <div class="d-flex align-items-start">
        <div class="nav flex-column nav-pills me-3 nav-shadow pb-5" id="v-pills-tab" role="tablist" aria-orientation="vertical">
          <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">
          <div class="circle-icon d-flex align-items-center justify-content-center me-3"> <i class="fa fa-home"></i> </div>
          Home</button>
          <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">
          <div class="circle-icon d-flex align-items-center justify-content-center me-3"> <i class="fa fa-user"></i> </div>
          Profile</button>
          <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">
          <div class="circle-icon d-flex align-items-center justify-content-center me-3"> <i class="fa fa-envelope"></i> </div>
          Messages</button>
          <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">
          <div class="circle-icon d-flex align-items-center justify-content-center me-3"> <i class="fa fa-cog"></i> </div>
          Settings</button>
        </div>
        <div class="tab-content" id="v-pills-tabContent">
          <div class="tab-pane fade show active pt-4 me-4" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
            <div class="d-flex align-items-center mb-3"> 
				<img src="images/slide-1.jpg" alt="" class="img-cont me-3" >
              <div>
                <h3><strong>Lorem Ipsum Dolor</strong></h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae alias eum fugiat asperiores. Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime at magnam modi iusto porro excepturi.</p>
				  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae alias eum fugiat asperiores. Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime at magnam modi iusto porro excepturi.</p>
				  
				  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae alias eum fugiat asperiores. Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime at magnam modi iusto porro excepturi.</p>
              </div>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
          </div>
          <div class="tab-pane fade pt-4 me-4" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
            <h4>Lorem Ipsum</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
          </div>
          <div class="tab-pane fade pt-4 me-4" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
            <h4>Lorem Ipsum</h4>
            <p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="tab-pane fade pt-4 me-4" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
            <h4>Lorem Ipsum</h4>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.</p>
          </div>
        </div>
      </div>
    </div>

Home</button>

Profile</button>

Messages</button>

Settings</button>

</div>

<div>

<h3><strong>Lorem Ipsum Dolor</strong></h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae alias eum fugiat asperiores. Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime at magnam modi iusto porro excepturi.</p>

</div>

<h4>Lorem Ipsum</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

</div>

<h4>Lorem Ipsum</h4>

<p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<h4>Lorem Ipsum</h4>

<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.</p>

</div>

CSS Code

The following CSS code is the styles.css file that is used for the styling of the index.html page and the tabs with tab content.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK&display=swap');
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Noto Sans HK', sans-serif;
  background: #fff;
}
p{
	text-align: justify;
	font-size: 13px;
}
.nav-shadow {
    box-shadow: 0 2px 15px rgb(0 0 0 / 5%) !important;
}
.nav-border{
	border-right: 3px solid #fc4a1a;
}
.nav-pills .nav-link {
  padding: 20px;
  width: 300px;
  height: 100%;
  border: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;
  color: #333;
  transition: all 0.3s;
}
.nav-pills .nav-link.active {
  background: -webkit-linear-gradient(30deg, #fc4a1a, #f7b733);
  background: -o-linear-gradient(30deg, #fc4a1a, #f7b733);
  background: linear-gradient(120deg, #fc4a1a, #f7b733);
  color: #fff;
  box-shadow: 0 2px 15px rgb(0 0 0 / 10%);
}
.nav-pills .nav-link{
	border-radius: 0px;
}
.nav-link .circle-icon {
    height: 50px;
    width: 50px;
    border-radius: 50px;
    border: 2px solid #f7b733;
    background: #fff;
    color: #fc4a1a;
    font-size: 22px;
}
.img-cont{
	max-width: 350px;
		width: 100%;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK&display=swap');

html {

scroll-behavior: smooth;

}

body {

font-family: 'Noto Sans HK', sans-serif;

background: #fff;

}

text-align: justify;

font-size: 13px;

}

.nav-shadow {

box-shadow: 0 2px 15px rgb(0 0 0 / 5%) !important;

}

.nav-border{

border-right: 3px solid #fc4a1a;

}

.nav-pills .nav-link {

padding: 20px;

width: 300px;

height: 100%;

border: none;

display: flex;

flex-direction: row;

align-items: center;

background: #fff;

color: #333;

transition: all 0.3s;

}

.nav-pills .nav-link.active {

background: -webkit-linear-gradient(30deg, #fc4a1a, #f7b733);

background: -o-linear-gradient(30deg, #fc4a1a, #f7b733);

background: linear-gradient(120deg, #fc4a1a, #f7b733);

color: #fff;

box-shadow: 0 2px 15px rgb(0 0 0 / 10%);

}

.nav-pills .nav-link{

border-radius: 0px;

}

.nav-link .circle-icon {

height: 50px;

width: 50px;

border-radius: 50px;

border: 2px solid #f7b733;

background: #fff;

color: #fc4a1a;

font-size: 22px;

}

.img-cont{

max-width: 350px;

width: 100%;

}

Full Source Code for Bootstrap Vertical Tab

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 5 Vertical Tabs | Free Download</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<section class="pt-5 main-content">
  <div class="container">
    <h1 class="text-center"><b>Bootstrap 5 Vertical Tabs</b></h1>
    <div class="d-flex bg-white flex-row shadow nav-border">
      <div class="d-flex align-items-start">
        <div class="nav flex-column nav-pills me-3 nav-shadow pb-5" id="v-pills-tab" role="tablist" aria-orientation="vertical">
          <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">
          <div class="circle-icon d-flex align-items-center justify-content-center me-3"> <i class="fa fa-home"></i> </div>
          Home</button>
          <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">
          <div class="circle-icon d-flex align-items-center justify-content-center me-3"> <i class="fa fa-user"></i> </div>
          Profile</button>
          <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">
          <div class="circle-icon d-flex align-items-center justify-content-center me-3"> <i class="fa fa-envelope"></i> </div>
          Messages</button>
          <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">
          <div class="circle-icon d-flex align-items-center justify-content-center me-3"> <i class="fa fa-cog"></i> </div>
          Settings</button>
        </div>
        <div class="tab-content" id="v-pills-tabContent">
          <div class="tab-pane fade show active pt-4 me-4" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
            <div class="d-flex align-items-center mb-3"> 
				<img src="images/slide-1.jpg" alt="" class="img-cont me-3" >
              <div>
                <h3><strong>Lorem Ipsum Dolor</strong></h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae alias eum fugiat asperiores. Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime at magnam modi iusto porro excepturi.</p>
				  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae alias eum fugiat asperiores. Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime at magnam modi iusto porro excepturi.</p>
				  
				  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae alias eum fugiat asperiores. Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime at magnam modi iusto porro excepturi.</p>
              </div>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
          <div class="tab-pane fade pt-4 me-4" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
            <h4>Lorem Ipsum</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          </div>
          <div class="tab-pane fade pt-4 me-4" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
            <h4>Lorem Ipsum</h4>
            <p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="tab-pane fade pt-4 me-4" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
            <h4>Lorem Ipsum</h4>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script> 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" ></script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Bootstrap 5 Vertical Tabs | Free Download</title>

</head>

<body>

<h1 class="text-center"><b>Bootstrap 5 Vertical Tabs</b></h1>

Home</button>

Profile</button>

Messages</button>

Settings</button>

</div>

<div>

<h3><strong>Lorem Ipsum Dolor</strong></h3>

</div>

<h4>Lorem Ipsum</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

</div>

<h4>Lorem Ipsum</h4>

<p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<h4>Lorem Ipsum</h4>

<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</section>

</body>

</html>

Hope this tutorial will help you to create Bootstrap Vertical Tab. Please share and like. Thank You

Download Full Source Code

Download Bootstrap Vertical Tab

1 file(s) 2.01 MB

Download

Live Demo

December 13, 2022

HTMLCSS

Owl Carousel Product Slider in HTML5

Know Details

jQuery Carousel Slider With Accordion Style Transitions

June 6, 2022

HTMLCSS

jQuery Carousel Slider With Accordion Style Transitions

Know Details

Testimonials HTML Template Free Download

January 15, 2022

HTMLCSS

Testimonials HTML Template Free Download

Know Details

Bootstrap Table with Pagination and Search

January 9, 2022

HTMLCSS

Bootstrap Table with Pagination and Search

Know Details

Attractive Responsive Testimonials Carousel

December 8, 2021

HTMLCSS

Attractive Responsive Testimonials Carousel

Know Details

How To Make Responsive Testimonial Slider

December 7, 2021

HTMLCSS

How To Make Responsive Testimonial Slider

Know Details

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.