Bootstrap Timeline:

Bootstrap Custom NavTabs

If you have to add much information to your website, it is better to use a timeline to do so. These Bootstrap Custom NavTabs have the same purpose and you can add information step by step. By using these Bootstrap Wizard Tabs, you can improve your page and interest your visitors. Most websites use these CSS Progress Tabs to engage their users and explain to them all processes of doing a job. In this code, we have prepared these HTML Step by Step Tabs and you can use their great performance. Below, you can see a preview of this post with an amazing design.

By looking at the following Bootstrap Consecutive Tabs, you realize the beauty of this code. As you see, this code has a white background and you can use it for simple websites. This code contains five parts with numbers that are connected to each other with a gray line. These numbers are located in a white circle. As you click on a number, its background changes to blue and the gray line turns blue. After these changes, you can see the text related to the number. When you click the last item, all lines turn blue. These Navigation Tabs help you place much information in a small space.

Bootstrap Wizard Tabs

CSS Progress Tabs

HTML Step by Step Tabs

Bootstrap ConsecutiveTabs

Navigation Tabs

<!-- This script got from frontendfreecode.com -->
<div class="container py-4">
    <div class="py-4">
        <div class="position-relative mb-4"
                style="height:2rem;">
            <div class="w-100 position-absolute top-50 start-50 translate-middle">
                <div class="progress"
                        style="height:.25rem;">
                    <div class="progress-bar bg-primary"
                            id="progress-tab"
                            role="progressbar"
                            style="width:25%;"
                            aria-valuenow="50"
                            aria-valuemin="0"
                            aria-valuemax="100"></div>
                </div>
                <ul class="nav nav-tabs border-0 w-100 hstack justify-content-between position-absolute top-50 start-50 translate-middle"
                    id="skk-tabs">
                    <li class="nav-item" role="presentation">
                        <button type="button"
                                class="btn btn-sm btn-primary rounded-pill"
                                style="width:2rem;height:2rem;"
                                data-bs-toggle="tab"
                                data-bs-target="#tab1"
                                data-skk-value="1">
                            1
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button type="button"
                                class="btn btn-sm btn-primary rounded-pill active"
                                style="width:2rem;height:2rem;"
                                data-bs-toggle="tab"
                                data-bs-target="#tab2"
                                data-skk-value="2">
                            2
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button type="button"
                                class="btn btn-sm btn-secondary rounded-pill"
                                style="width:2rem;height:2rem;"
                                data-bs-toggle="tab"
                                data-bs-target="#tab3"
                                data-skk-value="3">
                            3
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button type="button"
                                class="btn btn-sm btn-secondary rounded-pill"
                                style="width:2rem;height:2rem;"
                                data-bs-toggle="tab"
                                data-bs-target="#tab4"
                                data-skk-value="4">
                            4
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button type="button"
                                class="btn btn-sm btn-secondary rounded-pill"
                                style="width:2rem;height:2rem;"
                                data-bs-toggle="tab"
                                data-bs-target="#tab5"
                                data-skk-value="5">
                            5
                        </button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tab-content p-4">
            <div class="tab-pane animate__animated animate__flipInX" id="tab1">
                <h4 class="">Tab 1</h4>
                <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sed leo sed finibus. Donec ac risus metus. Aenean porttitor, metus in elementum consequat, sapien sapien pulvinar arcu, vitae viverra dui nibh sed urna. Morbi vestibulum posuere elit ut mollis. Mauris eleifend rhoncus dui, et accumsan nibh finibus non. Ut ut urna facilisis magna faucibus commodo sodales at leo. Donec elit tellus, suscipit commodo egestas ut, venenatis quis sem. Nunc vitae fermentum nisi. Aliquam eget nibh vitae mauris convallis auctor vitae in tellus.</p>
            </div>
            <div class="tab-pane animate__animated animate__flipInX active" id="tab2">
                <h4 class="">Tab 2</h4>
                <p class="">Aenean vel nibh venenatis, iaculis metus quis, dapibus ante. Ut vel dapibus mauris. Etiam varius, odio non condimentum fermentum, dolor velit convallis nunc, in ultrices lectus lectus in ipsum. Morbi posuere tincidunt nisl, vitae volutpat eros interdum sit amet. Morbi quis sollicitudin quam. Praesent quis augue erat. Nunc purus sem, hendrerit sit amet posuere id, egestas eget nulla. Mauris vulputate commodo velit a pharetra. Quisque feugiat enim vitae dictum molestie. Aenean sit amet ante non quam elementum tristique. Integer scelerisque mi ut imperdiet tincidunt. Curabitur aliquam feugiat tristique.</p>
            </div>
            <div class="tab-pane animate__animated animate__flipInX" id="tab3">
                <h4 class="">Tab 3</h4>
                <p class="">Morbi nunc nunc, pretium et lacus in, blandit sagittis enim. Nunc vitae ipsum non magna volutpat ornare id nec leo. Aenean et accumsan lacus, sed hendrerit massa. Duis dapibus euismod eros, id fringilla turpis pharetra at. Proin quam augue, mattis sed mi nec, efficitur auctor elit. Donec sed lobortis enim. Maecenas varius ut mi quis tempor.</p>
            </div>
            <div class="tab-pane animate__animated animate__flipInX" id="tab4">
                <h4 class="">Tab 4</h4>
                <p class="">Donec auctor velit vel risus vulputate, quis posuere enim cursus. Aenean vestibulum, libero vulputate tempor egestas, lectus lacus porta neque, at molestie orci sem id est. Mauris eu eros placerat, condimentum diam vel, dignissim mi. Curabitur euismod lorem ac bibendum congue. In laoreet molestie nisi in maximus. Nulla facilisi. Vivamus maximus vel nisi a elementum. Nam ultrices purus nec varius viverra. Mauris vitae nibh sollicitudin, sagittis tellus quis, venenatis augue. Nam sed lacinia lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam blandit malesuada laoreet. Nam porta sem rhoncus iaculis suscipit.</p>
            </div>
            <div class="tab-pane animate__animated animate__flipInX" id="tab5">
                <h4 class="">Tab 5</h4>
                <p class="">Etiam varius leo quis mauris accumsan viverra. Phasellus sed ante vel enim auctor cursus ut quis leo. Curabitur in condimentum lorem. Integer in maximus neque, eget mattis metus. Praesent aliquam mauris at nisl venenatis elementum. Praesent volutpat dignissim sapien quis porta. Maecenas auctor sapien quis arcu ullamcorper, vel vestibulum arcu condimentum. Integer vel tincidunt dui. Morbi aliquet nulla at augue sollicitudin iaculis. Maecenas tempor placerat vestibulum. Cras scelerisque est et eros gravida, id volutpat enim vestibulum. Duis porta purus egestas fermentum vehicula.</p>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

console.clear();
"use strict";
// Example only, not for production use
(function () {
    var tabContainer = document.querySelector("#skk-tabs"),
        tabEl = tabContainer.querySelectorAll("[data-bs-toggle='tab']"),
        progressTab = document.querySelector("#progress-tab");
    function tabEventShow(event) {
        var currentItem = this.parentNode,
            list = Array.from(currentItem.parentNode.children),
            position = list.indexOf(currentItem),
            length = list.length - 1,
            progressWidth = 0;
        progressWidth = (typeof (position) == "number") ? position : 0;
        progressWidth = (progressWidth > 0 && length > 0) ? (progressWidth / length * 100) : 0;
        progressTab.style.width = progressWidth + "%";
        tabEl.forEach(function (tab) {
            if (list.indexOf(tab.parentNode) <= position) {
                tab.classList.add("btn-primary");
                tab.classList.remove("btn-secondary");
            } else {
                tab.classList.add("btn-secondary");
                tab.classList.remove("btn-primary");
            }
        });
    }
    tabEl.forEach(function (tab) {
        tab.addEventListener("show.bs.tab", tabEventShow);
    });
})();

<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/StudioKonKon/bootstrap-konkon@1.3.0-beta/dist/css/studio-konkon.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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/gh/StudioKonKon/bootstrap-konkon@1.3.0-beta/dist/css/studio-konkon.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js'></script>
</head>
<body>
<div class="container py-4">
    <div class="py-4">
        <div class="position-relative mb-4"
                style="height:2rem;">
            <div class="w-100 position-absolute top-50 start-50 translate-middle">
                <div class="progress"
                        style="height:.25rem;">
                    <div class="progress-bar bg-primary"
                            id="progress-tab"
                            role="progressbar"
                            style="width:25%;"
                            aria-valuenow="50"
                            aria-valuemin="0"
                            aria-valuemax="100"></div>
                </div>
                <ul class="nav nav-tabs border-0 w-100 hstack justify-content-between position-absolute top-50 start-50 translate-middle"
                    id="skk-tabs">
                    <li class="nav-item" role="presentation">
                        <button type="button"
                                class="btn btn-sm btn-primary rounded-pill"
                                style="width:2rem;height:2rem;"
                                data-bs-toggle="tab"
                                data-bs-target="#tab1"
                                data-skk-value="1">
                            1
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button type="button"
                                class="btn btn-sm btn-primary rounded-pill active"
                                style="width:2rem;height:2rem;"
                                data-bs-toggle="tab"
                                data-bs-target="#tab2"
                                data-skk-value="2">
                            2
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button type="button"
                                class="btn btn-sm btn-secondary rounded-pill"
                                style="width:2rem;height:2rem;"
                                data-bs-toggle="tab"
                                data-bs-target="#tab3"
                                data-skk-value="3">
                            3
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button type="button"
                                class="btn btn-sm btn-secondary rounded-pill"
                                style="width:2rem;height:2rem;"
                                data-bs-toggle="tab"
                                data-bs-target="#tab4"
                                data-skk-value="4">
                            4
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button type="button"
                                class="btn btn-sm btn-secondary rounded-pill"
                                style="width:2rem;height:2rem;"
                                data-bs-toggle="tab"
                                data-bs-target="#tab5"
                                data-skk-value="5">
                            5
                        </button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tab-content p-4">
            <div class="tab-pane animate__animated animate__flipInX" id="tab1">
                <h4 class="">Tab 1</h4>
                <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sed leo sed finibus. Donec ac risus metus. Aenean porttitor, metus in elementum consequat, sapien sapien pulvinar arcu, vitae viverra dui nibh sed urna. Morbi vestibulum posuere elit ut mollis. Mauris eleifend rhoncus dui, et accumsan nibh finibus non. Ut ut urna facilisis magna faucibus commodo sodales at leo. Donec elit tellus, suscipit commodo egestas ut, venenatis quis sem. Nunc vitae fermentum nisi. Aliquam eget nibh vitae mauris convallis auctor vitae in tellus.</p>
            </div>
            <div class="tab-pane animate__animated animate__flipInX active" id="tab2">
                <h4 class="">Tab 2</h4>
                <p class="">Aenean vel nibh venenatis, iaculis metus quis, dapibus ante. Ut vel dapibus mauris. Etiam varius, odio non condimentum fermentum, dolor velit convallis nunc, in ultrices lectus lectus in ipsum. Morbi posuere tincidunt nisl, vitae volutpat eros interdum sit amet. Morbi quis sollicitudin quam. Praesent quis augue erat. Nunc purus sem, hendrerit sit amet posuere id, egestas eget nulla. Mauris vulputate commodo velit a pharetra. Quisque feugiat enim vitae dictum molestie. Aenean sit amet ante non quam elementum tristique. Integer scelerisque mi ut imperdiet tincidunt. Curabitur aliquam feugiat tristique.</p>
            </div>
            <div class="tab-pane animate__animated animate__flipInX" id="tab3">
                <h4 class="">Tab 3</h4>
                <p class="">Morbi nunc nunc, pretium et lacus in, blandit sagittis enim. Nunc vitae ipsum non magna volutpat ornare id nec leo. Aenean et accumsan lacus, sed hendrerit massa. Duis dapibus euismod eros, id fringilla turpis pharetra at. Proin quam augue, mattis sed mi nec, efficitur auctor elit. Donec sed lobortis enim. Maecenas varius ut mi quis tempor.</p>
            </div>
            <div class="tab-pane animate__animated animate__flipInX" id="tab4">
                <h4 class="">Tab 4</h4>
                <p class="">Donec auctor velit vel risus vulputate, quis posuere enim cursus. Aenean vestibulum, libero vulputate tempor egestas, lectus lacus porta neque, at molestie orci sem id est. Mauris eu eros placerat, condimentum diam vel, dignissim mi. Curabitur euismod lorem ac bibendum congue. In laoreet molestie nisi in maximus. Nulla facilisi. Vivamus maximus vel nisi a elementum. Nam ultrices purus nec varius viverra. Mauris vitae nibh sollicitudin, sagittis tellus quis, venenatis augue. Nam sed lacinia lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam blandit malesuada laoreet. Nam porta sem rhoncus iaculis suscipit.</p>
            </div>
            <div class="tab-pane animate__animated animate__flipInX" id="tab5">
                <h4 class="">Tab 5</h4>
                <p class="">Etiam varius leo quis mauris accumsan viverra. Phasellus sed ante vel enim auctor cursus ut quis leo. Curabitur in condimentum lorem. Integer in maximus neque, eget mattis metus. Praesent aliquam mauris at nisl venenatis elementum. Praesent volutpat dignissim sapien quis porta. Maecenas auctor sapien quis arcu ullamcorper, vel vestibulum arcu condimentum. Integer vel tincidunt dui. Morbi aliquet nulla at augue sollicitudin iaculis. Maecenas tempor placerat vestibulum. Cras scelerisque est et eros gravida, id volutpat enim vestibulum. Duis porta purus egestas fermentum vehicula.</p>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
console.clear();
"use strict";
// Example only, not for production use
(function () {
    var tabContainer = document.querySelector("#skk-tabs"),
        tabEl = tabContainer.querySelectorAll("[data-bs-toggle='tab']"),
        progressTab = document.querySelector("#progress-tab");
    function tabEventShow(event) {
        var currentItem = this.parentNode,
            list = Array.from(currentItem.parentNode.children),
            position = list.indexOf(currentItem),
            length = list.length - 1,
            progressWidth = 0;
        progressWidth = (typeof (position) == "number") ? position : 0;
        progressWidth = (progressWidth > 0 && length > 0) ? (progressWidth / length * 100) : 0;
        progressTab.style.width = progressWidth + "%";
        tabEl.forEach(function (tab) {
            if (list.indexOf(tab.parentNode) <= position) {
                tab.classList.add("btn-primary");
                tab.classList.remove("btn-secondary");
            } else {
                tab.classList.add("btn-secondary");
                tab.classList.remove("btn-primary");
            }
        });
    }
    tabEl.forEach(function (tab) {
        tab.addEventListener("show.bs.tab", tabEventShow);
    });
})();
</script>

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

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars