How to design Bootstrap Vertical Tab

How to design Bootstrap Vertical Tab?

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="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">

JS Library

<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>

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>

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%;
}

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>

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