Bootstrap 4 Multi-Step Form Wizard – By Custom Javascript

HTML

	<div class="steps_wizard">
			<form id="regForm">
				<div class="all-steps" id="all-steps">
					<span class="step">1</span>
					<span class="step">2</span>
					<span class="step">3</span>
					<span class="step">4</span>
					<span class="step">5</span>
				</div>
				<div class="tab">
					<h1>1</h1>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, laboriosam perspiciatis quos
						vitae eveniet animi, accusantium eligendi nihil magni nemo suscipit facilis nisi ratione
						repudiandae fuga consectetur odio itaque ipsa.</p>

					<div id="nextprevious">
						<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
						<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
					</div>
				</div>


				<div class="tab">
					<h1>2</h1>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, laboriosam perspiciatis quos
						vitae eveniet animi, accusantium eligendi nihil magni nemo suscipit facilis nisi ratione
						repudiandae fuga consectetur odio itaque ipsa.</p>

					<div id="nextprevious">
						<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
						<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
					</div>
				</div>


				<div class="tab">
					<h1>3</h1>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, laboriosam perspiciatis quos
						vitae eveniet animi, accusantium eligendi nihil magni nemo suscipit facilis nisi ratione
						repudiandae fuga consectetur odio itaque ipsa.</p>

					<div id="nextprevious">
						<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
						<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
					</div>
				</div>


				<div class="tab">
					<h1>4</h1>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, laboriosam perspiciatis quos
						vitae eveniet animi, accusantium eligendi nihil magni nemo suscipit facilis nisi ratione
						repudiandae fuga consectetur odio itaque ipsa.</p>

					<div id="nextprevious">
						<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
						<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
					</div>
				</div>



				<div class="tab">
					<h1>5</h1>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, laboriosam perspiciatis quos
						vitae eveniet animi, accusantium eligendi nihil magni nemo suscipit facilis nisi ratione
						repudiandae fuga consectetur odio itaque ipsa.</p>

					<div id="nextprevious">
						<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
						<button type="button" id="nextBtn">Finsh</button>
					</div>
				</div>

			</form>


		</div>

SCSS

body{ font-family: "Noto Sans SC",sans-serif;}

.steps_wizard {
    max-width: 800px;
    margin: 0 auto;
    .tab {
        display: none;
        box-shadow: 0px 0px 8px rgb(222 222 222 / 64%);
        padding: 40px;
        text-align: center;
    }

    button {
        background-color: #4caf50;
        color: #ffffff;
        border: none;
        padding: 10px 20px;
        font-size: 17px;
        cursor: pointer;

        &:hover {
            opacity: 0.8;
        }
    }

    #prevBtn {
        background-color: #bbbbbb;
    }

    .all-steps {
        display: flex;
        margin-top: 30px;
        margin-bottom: 30px;
        justify-content: center;
        .step {
            height: 35px;
            width: 35px;
            margin: 0px 35px;
            background-color: #e0e0e0;
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            &:after {
                position: absolute;
                content: "";
                height: 1px;
                background-color: #e0e0e0;
                width: 110px;
                right: 0px;
                top: 50%;
                transform: translateY(-50%);
                z-index: -1;
            }

            &:nth-child(1) {
                &:after {
                    display: none;
                }
            }

            &.active {
                background-color: #4caf50;
                color: #fff;
            }

            &.finish {
                background-color: #ff5722;
                color: #fff;
            }
        }
    }
}

JAVSSCRIPT

var currentTab = 0;
document.addEventListener("DOMContentLoaded", function (event) {
  showTab(currentTab);
});
function showTab(n) {
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  fixStepIndicator(n)
}

function nextPrev(n) {
  var x = document.getElementsByClassName("tab");
  // if (n == 1 && !validateForm()) return false;
  x[currentTab].style.display = "none";
  currentTab = currentTab + n;
  if (currentTab >= x.length) {
    // document.getElementById("regForm").submit();
    // return false;
    //alert("sdf");
    document.getElementById("nextprevious").style.display = "none";
    document.getElementById("all-steps").style.display = "none";
    document.getElementById("register").style.display = "none";

  }
  showTab(currentTab);
}

function validateForm() {
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  for (i = 0; i < y.length; i++) { if (y[i].value == "") { y[i].className += " invalid"; valid = false; } } if (valid) { document.getElementsByClassName("step")[currentTab].className += " finish"; } return valid;
} function fixStepIndicator(n) { var i, x = document.getElementsByClassName("step"); for (i = 0; i < x.length; i++) { x[i].className = x[i].className.replace(" active", ""); } x[n].className += " active"; }

LIVE EXAMPLE