Bootstrap Tabs:

Vertical Tabs with Bootstrap

If you have a website and always upload new information, look at this post and use it to gain more visitors. Vertical Tabs with Bootstrap are presented in this post with a great performance. These Bootstrap Vertical Tabs are so functional and help you add more information in a small space. This code has four sections with beautiful items. The following code is vertical and you can see data in this shape. Pure CSS Vertical Tabs help you to include several kinds of information and save physical space.

We have prepared the preview of this code below. This preview shows the Vertical Tabs Code with a white design. So, you can use this code on your website if your page has a simple theme. The writings of this code are blue with a white background. As you click on a section, its background changes to blue with white text. After clicking on a title, its related text appears smoothly. Each one has a header with black color. If you like to add information to your website vertically, this code can help you. The Free Tabs Code is one of the best ones that fits with all kinds of websites.

Bootstrap Vertical Tabs

Vertical Tabs Code

Free Tabs Code

Pure CSS Vertical Tabs

<!-- This script got from frontendfreecode.com -->
<div class="tabs-verical m-5">
    <div class="row">
        <div class="col-3">
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active py-4" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true" name="v-pills-home-tab">
                    Converted Not Sent
                </a>
                <a class="nav-link py-4" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false" name="v-pills-profile-tab">
                    Not Converted
                </a>
                <a class="nav-link py-4" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false" name="v-pills-messages-tab">
                    Converted & Sent
                </a>
                <a class="nav-link py-4" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false" name="v-pills-settings-tab">
                    Completed
                </a>
            </div>
        </div>
        <div class="col-9">
            <div class="tab-content" id="v-pills-tabContent">
                <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                    foo tab content
                </div>
                <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                    Bar
                </div>
                <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                    FooBar
                </div>
                <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                    FoofooBar
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.tabs-verical .nav-link {
	border-right: 1px solid #ddd;
	border-radius: 0;
}
.tabs-verical .navbar-default .navbar-text {
	color: #ffffff;
}
.tabs-verical .nav-tabs>li.active>a, .tabs-verical .nav-tabs>.profile-posts li.active>a:focus, .tabs-verical .nav-tabs>li.active>a:hover {
	color: #555;
	cursor: default;
	background-color: #fff;
	border: 1px solid #ddd;
	border-bottom-color: rgb(221, 221, 221);
	border-bottom-color: transparent;
}

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css'>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css'>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js'></script>
<style>
.tabs-verical .nav-link {
	border-right: 1px solid #ddd;
	border-radius: 0;
}
.tabs-verical .navbar-default .navbar-text {
	color: #ffffff;
}
.tabs-verical .nav-tabs>li.active>a, .tabs-verical .nav-tabs>.profile-posts li.active>a:focus, .tabs-verical .nav-tabs>li.active>a:hover {
	color: #555;
	cursor: default;
	background-color: #fff;
	border: 1px solid #ddd;
	border-bottom-color: rgb(221, 221, 221);
	border-bottom-color: transparent;
}
</style>

</head>
<body>
<div class="tabs-verical m-5">
    <div class="row">
        <div class="col-3">
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active py-4" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true" name="v-pills-home-tab">
                    Converted Not Sent
                </a>
                <a class="nav-link py-4" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false" name="v-pills-profile-tab">
                    Not Converted
                </a>
                <a class="nav-link py-4" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false" name="v-pills-messages-tab">
                    Converted & Sent
                </a>
                <a class="nav-link py-4" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false" name="v-pills-settings-tab">
                    Completed
                </a>
            </div>
        </div>
        <div class="col-9">
            <div class="tab-content" id="v-pills-tabContent">
                <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                    foo tab content
                </div>
                <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                    Bar
                </div>
                <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                    FooBar
                </div>
                <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                    FoofooBar
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS