Bootstrap GRID/Layouts - html

I'm fairly new to bootstrap and I'm kind of struggling with some of the layout settings. I want to create a centered form with a form of tooltip/box to the right that it's inline with the top of the form box. Below is my current form and I'll attach a photo of what I'm trying to achieve. I've been trying for quite a while but the closest I've come is having it centered in the middle of the page or below the existing form.
What I am trying to achieve: (The orange box)
Current html:
<html lang="en">
<head>
<title>Stackoverflow</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row my-3">
<div class="col-1 col-md-2 col-lg-3"></div>
<div class="col-10 col-md-8 col-lg-6 my-3 border">
<!-- Form -->
<form class="border" action="" method="post" class="my-3">
<h1>ABC</h1>
<h2>Lorem ipsum dolor</h2>
<p class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, beatae?
Consequuntur qu</p>
<!-- Input fields -->
<div class="form-group">
<label class="sr-only" for="accountNumber">Account number:</label>
<input type="text" class="form-control accountNumber" id="accountNumber"
placeholder="Account number..." name="accountNumber">
</div>
<div class="form-group">
<label class="sr-only" for="email">Email:</label>
<input type="text" class="form-control email" id="email" placeholder="Email..." name="email">
<small id="emailHelpBlock" class="form-text text-muted">Make sure it's your personal email - you
will need to use it for verification to log in.
</small>
</div>
<div class="alert alert-primary" role="alert"> <span class="icon oi oi-info"></span>This will be your username
</div>
<div class="form-group">
<label class="sr-only" for="firstName">First Name <input type="text" class="form-control firstName" id="firstName" placeholder="First name..."
name="firstName"></label>
</div>
<div class="form-group">
<label class="sr-only" for="surname">Surname:</label>
<input type="text" class="form-control surname" id="surname" placeholder="Surname..."
name="surname">
</div>
<div class="form-group">
<label class="sr-only" for="dateOfBirth">Password:</label>
<input type="text" class="form-control dateOfBirth" id="dateOfBirth"
placeholder="Date of birth..." name="dateOfBirth">
<small id="dateOfBirthHelpBlock" class="form-text text-muted">
DD/MM/YYYY
</small>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password:</label>
<input type="password" class="form-control password" id="password" placeholder="Password..."
name="password">
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">I accept the</label>
<span>
Terms and Conditions
</span>
</div>
<button type="submit" class="btn btn-primary btn-block">Signup</button>
</div>
<!-- End input fields -->
</form>
<!-- Form end -->
</div>
<div class="col-1 col-md-2 col-lg-3></div>
</div>
</div>
</body>
Thanks in advance!


I ended up working through my own solution. To solve my problem I made adjustments to the container holding both the form as well as this new box. As can be seen below.
Solution:
<body>
<div class="container h-100 mt-5">
<div class="row h-100 justify-content-center">
<div class="col-10 col-md-8 col-lg-6 ">
<!-- Form -->
<form class="" action="" method="post">
<h1>ABC</h1>
<h2>Lorem ipsum dolor</h2>
<p class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, beatae?
Consequuntur qu</p>
<!-- Input fields -->
<div class="form-group">
<label class="sr-only" for="accountNumber">Account number:</label>
<input type="text" class="form-control accountNumber" id="accountNumber"
placeholder="Account number..." name="accountNumber">
<small id="accountNumberHelpBlock" class="form-text text-muted">Check your Welcome Pack or call
us 1800 000 000 for help
</small>
</div>
<div class="form-group">
<label class="sr-only" for="email">Email:</label>
<input type="text" class="form-control email" id="email" placeholder="Email..." name="email">
<small id="emailHelpBlock" class="form-text text-muted">Make sure it's your personal email - you
will need to use it for verification to log in.
</small>
<div class="alert alert-primary" role="alert"> <span class="icon oi oi-info"></span>This will be
your
username</div>
</div>
<div class="form-group">
<label class="sr-only" for="firstName">First Name:</label>
<input type="text" class="form-control firstName" id="firstName" placeholder="First name..."
name="firstName">
<small id="firstNameHelpBlock" class="form-text text-muted">This is the name that is shown on
your Welcome Pack
</small>
</div>
<div class="form-group">
<label class="sr-only" for="surname">Surname:</label>
<input type="text" class="form-control surname" id="surname" placeholder="Surname..."
name="surname">
</div>
<div class="form-group">
<label class="sr-only" for="dateOfBirth">Password:</label>
<input type="text" class="form-control dateOfBirth" id="dateOfBirth"
placeholder="Date of birth..." name="dateOfBirth">
<small id="dateOfBirthHelpBlock" class="form-text text-muted">
DD/MM/YYYY
</small>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password:</label>
<input type="password" class="form-control password" id="password" placeholder="Password..."
name="password">
</div>
<div class="form-group">
<label class="sr-only" for="password2">Confirm Password:</label>
<input type="password" class="form-control password" id="password2"
placeholder="Confirm your password..." name="password">
</div>
<div class="form-group">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
I accept the
</label>
<span>
Terms and Conditions
</span>
<button type="submit" class="btn btn-primary float-right">Register for access</button>
</div>
<!-- End input fields -->
</form>
<!-- Form end -->
</div>
</div>
<div class="border col-lg-3 box">
<div class="help1 border-bottom">
<h4><span class="icon oi oi-question-mark"></span>Need some help?</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi totam vel, cum reiciendis tenetur
quia ullam soluta. Praesentium minus explicabo ducimus mollitia dolorum, ipsam tenetur, et
voluptatum quae, nostrum atque!
</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, rem. Incidunt molestiae
repellendus
et sunt iure perferendis saepe ipsam.
</p>
</div>
<div class="help2 border-bottom">
<h4 class="mt-2"><span class="icon oi oi-person"></span>Already registered?</h4>
<a href="#" class="btn btn-light btn-sm btn-block mb-3" tabindex="-1" role="button"
aria-disabled="true">Log in
</a>
</div>
<div class="help3">
<h4 class="mt-2"><span class="icon oi oi-person"></span>You're already a ABC customer?</h4>
<a href="#" class="btn btn-light btn-sm btn-block" tabindex="-1" role="button" aria-disabled="true">Log
in to ABC Internet
</a>
</div>
</div>
<script>
</script>
</body>


Have a look at the design , you need the same. because, I was doing the same as you have attached the picture. It is showing me the same in all view.
Their is some mistake, I have highlighted below. please read this for the next time.
First, You have to add Bootstrap CDN in HTML File to use bootstrap classes.
Second, Don't forget to close the tags. Their is no closing tag in many places that's why its design was not showing properly.
Try to write code in format so that you know which closing tag is
missing.
Third, Their is no need to take .h-100 class in body and every div tag or container it automatically. if anywhere you want to less height
then you can use CSS for less height.
<html lang="en">
<head>
<title>Stackoverflow</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row my-3">
<div class="col-1 col-md-2 col-lg-3"></div>
<div class="col-10 col-md-8 col-lg-6 my-3 border">
<!-- Form -->
<form class="border" action="" method="post" class="my-3">
<h1>ABC</h1>
<h2>Lorem ipsum dolor</h2>
<p class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, beatae?
Consequuntur qu</p>
<!-- Input fields -->
<div class="form-group">
<label class="sr-only" for="accountNumber">Account number:</label>
<input type="text" class="form-control accountNumber" id="accountNumber"
placeholder="Account number..." name="accountNumber">
</div>
<div class="form-group">
<label class="sr-only" for="email">Email:</label>
<input type="text" class="form-control email" id="email" placeholder="Email..." name="email">
<small id="emailHelpBlock" class="form-text text-muted">Make sure it's your personal email - you
will need to use it for verification to log in.
</small>
</div>
<div class="alert alert-primary" role="alert"> <span class="icon oi oi-info"></span>This will be your username
</div>
<div class="form-group">
<label class="sr-only" for="firstName">First Name <input type="text" class="form-control firstName" id="firstName" placeholder="First name..."
name="firstName"></label>
</div>
<div class="form-group">
<label class="sr-only" for="surname">Surname:</label>
<input type="text" class="form-control surname" id="surname" placeholder="Surname..."
name="surname">
</div>
<div class="form-group">
<label class="sr-only" for="dateOfBirth">Password:</label>
<input type="text" class="form-control dateOfBirth" id="dateOfBirth"
placeholder="Date of birth..." name="dateOfBirth">
<small id="dateOfBirthHelpBlock" class="form-text text-muted">
DD/MM/YYYY
</small>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password:</label>
<input type="password" class="form-control password" id="password" placeholder="Password..."
name="password">
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">I accept the</label>
<span>
Terms and Conditions
</span>
</div>
<button type="submit" class="btn btn-primary btn-block">Signup</button>
</div>
<!-- End input fields -->
</form>
<!-- Form end -->
</div>
<div class="col-1 col-md-2 col-lg-3></div>
</div>
</div>
</body>

Related

How to center the div horizontally elements having container and row class in Bootstrap 5?

The section cannot align properly in the center and neither does the div have a container class. If there is any bootstrap class for alignment or do I have to create CSS code for aligning the items in the div tag.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<section class="bg-secondary bg-gradient p-5 text-white">
<div class="container">
<div class="row">
<h1 class="text-center">Contact Us</h1>
<br>
<div class="col-md-12 text-light">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label class="form-label" for="name">Name</label>
<input class="form-control" id="name" type="text" placeholder="Name" />
</div>
<div class="form-group col-md-6">
<label class="form-label" for="place">Place</label>
<input class="form-control" id="place" type="text" placeholder="Place" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="form-label" for="emailAddress">Email Address</label>
<input class="form-control" id="emailAddress" type="email" placeholder="Email Address" />
</div>
<div class="form-group col-md-6">
<label class="form-label" for="mobNumber">Mobile Number</label>
<input class="form-control" id="mobNumber" type="tel" placeholder="Mobile Number" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="form-label" for="message">Message</label>
<textarea class="form-control" id="message" type="text" placeholder="Type your Message here..." style="height: 10rem;"></textarea>
</div>
</div>
<br>
<button class="btn btn-primary btn-lg" type="submit">Submit</button>
</form>
</div>
</div>
</div>
</section>

Can you try this ?
I have assigned a col-md-6 to cover all the elements under the row and I converted col-md-6 in the form-group classes to col-12.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<section class="bg-secondary bg-gradient p-5 text-white">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<h1 class="text-center">Contact Us</h1>
<br>
<div class="col-md-12 text-light">
<form>
<div class="form-row">
<div class="form-group col-12">
<label class="form-label" for="name">Name</label>
<input class="form-control" id="name" type="text" placeholder="Name" />
</div>
<div class="form-group col-12">
<label class="form-label" for="place">Place</label>
<input class="form-control" id="place" type="text" placeholder="Place" />
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label class="form-label" for="emailAddress">Email Address</label>
<input class="form-control" id="emailAddress" type="email" placeholder="Email Address" />
</div>
<div class="form-group col-12">
<label class="form-label" for="mobNumber">Mobile Number</label>
<input class="form-control" id="mobNumber" type="tel" placeholder="Mobile Number" />
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label class="form-label" for="message">Message</label>
<textarea class="form-control" id="message" type="text" placeholder="Type your Message here..." style="height: 10rem;"></textarea>
</div>
</div>
<br>
<button class="btn btn-primary btn-lg" type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
</section>

html toggle visibility password inside the input

I'm learning html/css, I'm doing a registration form and I'd like to put the eye toggle to show the password inside the password input field, there is a way to do it to keep the scalability in the different resolutions? Searching online I think that I have to put them in a container and then use css but if I try to do it changing the container in css the whole my form breaks...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index Registration</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel= "stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/style.css">
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 col-9">
<div class="login-wrap py-3 px-4">
<h2 style="color: #FFF; text-align: center;" class="text-uppercase text-center mb-5">Create new Account</h2>
<form class="form-sigin" action="../home/index.php" name="formRegistration" id="formRegistration" method="post">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="firstNameNewUser" style="margin-left: 0px;">First Name</label>
<input type="text" name ="firstNameNewUser" id="firstNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="lastNameNewUser">Last Name</label>
<input type="text" name ="lastNameNewUser" id="lastNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
</div>
<div class="control mb-4">
<label class="form-label" for="nickNewUser">Your Nickname</label>
<input type="text" name ="nickNewUser" id="nickNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="emailNewUser">Your Email</label>
<input type="email" name ="emailNewUser" id="emailNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="passwordNewUser">Password</label>
<input type="password" name ="passwordNewUser" id="passwordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
<i> <span class="material-icons">visibility</span> </i>
</div>
<div class="control mb-4">
<label class="form-label" for="rPasswordNewUser">Repeat your password</label>
<div class="parent inline-flex-parent">
<div class="child">
<input type="password" name ="rPasswordNewUser" id="rPasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="child">
<i> <span class="material-icons">visibility</span> </i>
</div>
</div>
</div>
<div class="form-check" id="form-checkbox">
<input
class="form-check-input me-2"
type="checkbox"
value=""
name="checkboxterms"
id="checkboxterms"
/>
<label class="form-check-label" for="checkboxterms" name="checkboxtermslabel" id="checkboxtermslabel">
I agree all statements in Terms of service
</label>
</div>
<p id="spacing"> </p>
<div class="d-flex justify-content-center">
<div style="clear:both;"></div>
<button type="submit" id = "registerButton" name="registerButton" class="btn btn-primary rounded submit p-2 px-4">Register</button>
</div>
<p class="text-center text-muted mt-5 mb-0">Have already an account?
<u>Login here</u>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
EDIT:
the current password code you see are just some tests that I'm doing, If I don't put the passw input field and the inside a div, then they will be put one over the other, so I created a div to put them side by side... by also like this, if the resolution change then the eye icon will not be in the right place

This is how I implement pw visibility. As far as scalability, if you use Bootstrap's sizing classes it should all scale well. I've had no issues moving this between assorted screen sizes.
Addendum : centering the Eye
I modified the second password field.
To properly vertically center it I had to alter the html. Compare against the first password HTML.
In particular:
wrapped the "eye" containing div and the input in it's own relative div. (position-relative moved from outer div.control
Added Bootstrap class h-100 to the "eye" div
Added bootstrap class align-middle to the "eye" and
Created an actual rule for .pw-toggle that sets height: 1rem; so that align-middle centers correctly.
$(function() {
$("span.pw-toggle, span.pw-toggle2").click(function() {
var $pwField = $($(this).data().target);
var TorP = $pwField.attr('type') == 'password' ? 'text' : 'password';
$(this).text(TorP === "password" ? "visibility" : "visibility_off")
$pwField.attr('type', TorP);
});
});
span[data-target] {
cursor: pointer;
}
.pw-toggle {
height: 1rem;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 col-9">
<div class="login-wrap py-3 px-4">
<h2 style="color: #FFF; text-align: center;" class="text-uppercase text-center mb-5">Create new Account</h2>
<form class="form-sigin" action="../home/index.php" name="formRegistration" id="formRegistration" method="post">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="firstNameNewUser" style="margin-left: 0px;">First Name</label>
<input type="text" name="firstNameNewUser" id="firstNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="lastNameNewUser">Last Name</label>
<input type="text" name="lastNameNewUser" id="lastNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
</div>
<div class="control mb-4">
<label class="form-label" for="nickNewUser">Your Nickname</label>
<input type="text" name="nickNewUser" id="nickNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="emailNewUser">Your Email</label>
<input type="email" name="emailNewUser" id="emailNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4 position-relative">
<label class="form-label" for="passwordNewUser">Password</label>
<div class="position-absolute end-0 me-1">
<span data-target="#passwordNewUser" class="pw-toggle material-icons pr-1">visibility</span>
</div>
<input type="password" name="passwordNewUser" id="passwordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="rPasswordNewUser">Repeat your password</label>
<div class="position-relative">
<div class="position-absolute end-0 me-1 h-100">
<span data-target="#rPasswordNewUser" class="pw-toggle material-icons pr-1 align-middle">visibility</span>
</div>
<input type="password" name="rPasswordNewUser" id="rPasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
<!-- Just for fun, the eye as a Bootstrap input
addon is much cleaner -->
<div clas="control mb-4">
<div class="input-group">
<input type="password" name="r2PasswordNewUser" id="r2PasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
<span class="input-group-text">
<span data-target="#r2PasswordNewUser" class="pw-toggle2 material-icons">visibility</span>
</span>
</div>
</div>
<div class="form-check" id="form-checkbox">
<input class="form-check-input me-2" type="checkbox" value="" name="checkboxterms" id="checkboxterms" />
<label class="form-check-label" for="checkboxterms" name="checkboxtermslabel" id="checkboxtermslabel">
I agree all statements in Terms of service
</label>
</div>
<p id="spacing"> </p>
<div class="d-flex justify-content-center">
<div style="clear:both;"></div>
<button type="submit" id="registerButton" name="registerButton" class="btn btn-primary rounded submit p-2 px-4">Register</button>
</div>
<p class="text-center text-muted mt-5 mb-0">Have already an account?
<u>Login here</u>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</body>

This is how you would implement that functionality with JavaScript. We grab the eye ball icon and the two password fields. Then, loop through the eyeBall and add an event listener to it. It checks whether the type attribute is password or text. If it is password, it changes it to text.
let eyeBall = document.getElementsByClassName('viewPass');
let passInput = document.getElementsByClassName('passwordInput');
let passField = document.getElementById('passwordNewUser');
function change_visibility($type) {
for(let field of passInput) {
field.setAttribute('type', $type);
}
}
for(let eye of eyeBall) {
eye.addEventListener('click', function() {
if (passField.getAttribute('type') == 'password') {
change_visibility('text');
} else {
change_visibility('password');
}
});
}
.viewPass {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index Registration</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel= "stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/style.css">
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 col-9">
<div class="login-wrap py-3 px-4">
<h2 style="color: #FFF; text-align: center;" class="text-uppercase text-center mb-5">Create new Account</h2>
<form class="form-sigin" action="../home/index.php" name="formRegistration" id="formRegistration" method="post">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="firstNameNewUser" style="margin-left: 0px;">First Name</label>
<input type="text" name ="firstNameNewUser" id="firstNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="lastNameNewUser">Last Name</label>
<input type="text" name ="lastNameNewUser" id="lastNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
</div>
<div class="control mb-4">
<label class="form-label" for="nickNewUser">Your Nickname</label>
<input type="text" name ="nickNewUser" id="nickNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="emailNewUser">Your Email</label>
<input type="email" name ="emailNewUser" id="emailNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="passwordNewUser">Password</label>
<input class="passwordInput" type="password" name ="passwordNewUser" id="passwordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
<i class="viewPass"> <span class="material-icons">visibility</span> </i>
</div>
<div class="control mb-4">
<label class="form-label" for="rPasswordNewUser">Repeat your password</label>
<div class="parent inline-flex-parent">
<div class="child">
<input class="passwordInput" type="password" name ="rPasswordNewUser" id="rPasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="child">
<i class="viewPass"> <span class="material-icons">visibility</span> </i>
</div>
</div>
</div>
<div class="form-check" id="form-checkbox">
<input
class="form-check-input me-2"
type="checkbox"
value=""
name="checkboxterms"
id="checkboxterms"
/>
<label class="form-check-label" for="checkboxterms" name="checkboxtermslabel" id="checkboxtermslabel">
I agree all statements in Terms of service
</label>
</div>
<p id="spacing"> </p>
<div class="d-flex justify-content-center">
<div style="clear:both;"></div>
<button type="submit" id = "registerButton" name="registerButton" class="btn btn-primary rounded submit p-2 px-4">Register</button>
</div>
<p class="text-center text-muted mt-5 mb-0">Have already an account?
<u>Login here</u>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

why clicking on the next button is not showing the content on the next page?

Hello I am new to programming Iam creating a complaint page using bootstrap, css , JavaScript.
when added this css:
.needs-validation fieldset:not(:first-of-type) {display: none;} it not showing the next page content.
I need when the user choose the from option show the the next page
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title> Communication Portal</title>
<!-- CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<style type="text/css">
.needs-validation fieldset:not(:first-of-type) {
display: none;
}
</style>
<!-- FONT -->
<link href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
</head>
<body>
<div class="container d-flex align-items-center min-vh-100"><!-- CONTAINER Starts-->
<div class="row g-0 justify-content-center"><!--- row g-0 justify-content-center Starts-->
<div class="col-lg-4 offset-lg-1 mx-0 px-0"><!-- TITLE Starts -->
<div id="title-container"><!-- title-container Starts-->
<img class="covid-image" src="images/covid-check.png">
<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati molestiae voluptate atque, saepe maxime dolore cumque quidem veniam accusamus nulla commodi aut corporis, totam est molestias sed ea facere. Et?</p>
</div><!-- title-container Ends-->
</div><!-- TITLE Ends -->
<div class="col-lg-7 mx-0 px-0"><!-- FORMS Starts -->
<div class="progress"><!--progress Starts-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 0%"></div>
</div>
<div id="qbox-container">
<form class="needs-validation" id="form-wrapper" method="post" action="action.php" name="form-wrapper" novalidate>
<div id="steps-container">
<fieldset>
<div class="step">
<h4>Please Choose Lanuguage | رجاء اختيار اللغة </h4>
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<input class="form-check-input question__input" id="q_1_yes" name="q_1" type="radio" value="Yes">
<label class="form-check-label question__label" for="q_1_yes">Englsih</label>
</div>
<div class="q-box__question">
<input checked class="form-check-input question__input" id="q_1_no" name="q_1" type="radio" value="No">
<label class="form-check-label question__label" for="q_1_no">Arabic</label>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="step">
<h4>Do You want to mention Your Name</h4>
<div class="form-check ps-0 q-box">
<div class="row">
<div class="col">
<div class="q-box__question">
<input class="form-check-input question__input" id="q_2_yes" name="q_2" type="radio" value="Yes">
<label class="form-check-label question__label" for="q_2_yes">Yes</label>
</div>
</div>
<div class="col">
<div class="q-box__question">
<input checked class="form-check-input question__input" id="q_2_no" name="q_2" type="radio" value="No">
<label class="form-check-label question__label" for="q_2_no">No</label>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="step">
<h4>Please Write Your Name and Employee #</h4>
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<div class="row">
<div class="col">
<label for="inputEmail4">Employee Name</label>
<input type="name" class="form-control" placeholder="Employee Name">
</div>
<div class="col">
<label for="inputPassword4"> Employee Number # </label>
<input type="text" class="form-control" placeholder="Employee Number #">
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="step">
<h4>Please Select one of the folowing options</h4>
<div class="row">
<div class="col-lg-12">
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<input class="form-check-input question__input q-checkbox" id="q_4_right" name="q_4" type="radio" value="uk">
<label class="form-check-label question__label" for="q_4_right">
Doing the right thing ! <br>
<p class="lead">Reaporting someting you see wrong</p>
</label>
</div>
</div>
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<input class="form-check-input question__input q-checkbox" id="q_4_ideas" name="q_4" type="radio" value="j">
<label class="form-check-label question__label" for="q_4_ideas">Share your Ideas <br>
<p class="lead">Let us know if you have a great suggestion</p></label>
</div>
</div>
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<input class="form-check-input question__input" id="q_4_views" name="q_4" type="radio" value="us">
<label class="form-check-label question__label" for="q_4_views">Air your Views <br>
<p class="lead"> Tell us what's frusting you in the work place</p></label>
</div>
</div>
</div>
</div>
</div>
<div class="step">
<h4>Donig the right thing</h4>
<p>Reporting someting you see wrong
if you see or suspect someone or something being done wrong that is having a negative impact or harming the association please share your concern</p>
<div class="row">
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<label for="floatingTextarea2">Comments</label>
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
</div>
</div>
</div>
</div>
<div class="step">
<h4>Share your Ideas</h4>
<p>Did you know some of our best ideas have come from our colleagues? if you thing you have a great idea that can help the assocation to perform better , we would love to hear from you</p>
<div class="row">
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<label for="floatingTextarea2">your Ideas!</label>
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
</div>
</div>
</div>
</div>
<div class="step">
<h4>Air your views</h4>
<p>We all work hard and deserve tp be treated well, we have some very good, robst employment and operational policies and procedures to support and protect you,but if there is something that we have done wrong or is frustrating you we would like to hear from you about this , so we can look to the issue and rectify,where possible</p>
<div class="row">
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<label for="floatingTextarea2">Your Views</label>
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
</div>
</div>
</div>
</div>
</fieldset>
<div class="step">
<h4>Incident Reported on:</h4>
<div class="row">
<div class="col">
<label class="form-label">REPORTED PERSON</label>
<input type="text" class="form-control" placeholder="Reported Person">
</div>
<div class="col">
<label class="form-label">REPORTED EMPLOYEE #</label>
<input type="text" class="form-control" placeholder="Reported Employee #">
</div>
</div>
<div class="mt-2">
<label class="form-label">INCIDENT TYPE </label>
<select class="form-select" aria-label="Default select example">
<option selected>Select Incident Type</option>
<option value="1">THEFT</option>
<option value="2">NON COMPLIANCE WITH COMPANY POLICY</option>
<option value="3">FRAUD</option>
<option value="3">ABUSING POWER</option>
<option value="3">USING COMPANY PROPERTY FOR PERSONAL INTEREST</option>
<option value="3">NEGLIGENCE</option>
</select>
</div>
<div class="mt-2">
<label for="exampleFormControlTextarea1">INCIDENT DETAILS </label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="mt-2">
<label class="form-label">INCIDENT CITY</label>
<select class="form-select" aria-label="Default select example">
<option selected>Select Incident City</option>
<option value="1">Beirut</option>
<option value="2">Bekaa</option>
</select>
</div>
<div class="mt-2">
<div class="row">
<div class="col">
<label for="formFileMultiple" class="form-label">UPLOAD ATTACHEMENT </label>
<input class="form-control" type="file" id="formFileMultiple" multiple />
</div>
<div class="col">
<label for="" class="form-label">INCIDENT DATE</label>
</div>
</div>
<div class="mt-4">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">I confirm that, all above provided information is correct.</label>
</div>
</div>
</div>
</div>
<div class="step">
<div class="mt-1">
<div class="closing-text">
<h4>Thank you</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut omnis explicabo doloribus at iste magni maiores impedit, nam eum reprehenderit facere aliquid ipsa labore sed? Dolorem eveniet recusandae molestiae at.</p>
<p>Click on the submit button to continue.</p>
</div>
</div>
</div>
<div id="success">
<div class="mt-5">
<h4>Success! We'll get back to you ASAP!</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur deleniti eius ab totam quaerat illo perferendis, eum veritatis rerum tempore impedit. Saepe dolores eligendi eum culpa beatae, id doloribus ipsum.</p>
<a class="back-link" href="">Go back from the beginning ➜</a>
</div>
</div>
</div>
<div id="q-box__buttons">
<button id="prev-btn" type="button">Previous</button>
<button id="next-btn" type="button">Next</button>
<button id="submit-btn" type="submit">Submit</button>
</div>
</form>
</div><!--progress Starts-->
</div><!-- FORMS Ends -->
</div><!--- row g-0 justify-content-center Ends-->
</div><!-- CONTAINER ends -->
<div id="preloader-wrapper"><!-- preloader-wrapper Starts-->
<div id="preloader"></div>
<div class="preloader-section section-left"></div>
<div class="preloader-section section-right"></div>
</div><!-- preloader-wrapper Starts-->
<script src="js/script.js"></script>
</body>
</html>
javascipt
let step = document.getElementsByClassName('step');
let prevBtn = document.getElementById('prev-btn');
let nextBtn = document.getElementById('next-btn');
let submitBtn = document.getElementById('submit-btn');
let form = document.getElementsByTagName('form')[0];
let preloader = document.getElementById('preloader-wrapper');
let bodyElement = document.querySelector('body');
let succcessDiv = document.getElementById('success');
form.onsubmit = () => {
return false
}
let current_step = 0;
let stepCount = 8
step[current_step].classList.add('d-block');
if (current_step == 0) {
prevBtn.classList.add('d-none');
submitBtn.classList.add('d-none');
nextBtn.classList.add('d-inline-block');
}
const progress = (value) => {
document.getElementsByClassName('progress-bar')[0].style.width = `${value}%`;
}
nextBtn.addEventListener('click', () => {
current_step++;
let previous_step = current_step - 1;
if ((current_step > 0) && (current_step <= stepCount)) {
prevBtn.classList.remove('d-none');
prevBtn.classList.add('d-inline-block');
step[current_step].classList.remove('d-none');
step[current_step].classList.add('d-block');
step[previous_step].classList.remove('d-block');
step[previous_step].classList.add('d-none');
if (current_step == stepCount) {
submitBtn.classList.remove('d-none');
submitBtn.classList.add('d-inline-block');
nextBtn.classList.remove('d-inline-block');
nextBtn.classList.add('d-none');
}
} else {
if (current_step > stepCount) {
form.onsubmit = () => {
return true
}
}
}
progress((100 / stepCount) * current_step);
});
prevBtn.addEventListener('click', () => {
if (current_step > 0) {
current_step--;
let previous_step = current_step + 1;
prevBtn.classList.add('d-none');
prevBtn.classList.add('d-inline-block');
step[current_step].classList.remove('d-none');
step[current_step].classList.add('d-block')
step[previous_step].classList.remove('d-block');
step[previous_step].classList.add('d-none');
if (current_step < stepCount) {
submitBtn.classList.remove('d-inline-block');
submitBtn.classList.add('d-none');
nextBtn.classList.remove('d-none');
nextBtn.classList.add('d-inline-block');
prevBtn.classList.remove('d-none');
prevBtn.classList.add('d-inline-block');
}
}
if (current_step == 0) {
prevBtn.classList.remove('d-inline-block');
prevBtn.classList.add('d-none');
}
progress((100 / stepCount) * current_step);
});
submitBtn.addEventListener('click', () => {
preloader.classList.add('d-block');
const timer = ms => new Promise(res => setTimeout(res, ms));
timer(5)
.then(() => {
bodyElement.classList.add('loaded');
}).then(() => {
step[stepCount].classList.remove('d-block');
step[stepCount].classList.add('d-none');
prevBtn.classList.remove('d-inline-block');
prevBtn.classList.add('d-none');
submitBtn.classList.remove('d-inline-block');
submitBtn.classList.add('d-none');
succcessDiv.classList.remove('d-none');
succcessDiv.classList.add('d-block');
})
});
I tried to create the page with out .needs-validation fieldset:not(:first-of-type) {display: none;} but did not work. as I said before I am new

You did everything right in the JS, but this part: needs-validation fieldset:not(:first-of-type) {display: none;} was making everything "invisible".
The changes I've made were:
Remove the above mentioned css;
Add d-none to every-step, except the first one.
let step = document.getElementsByClassName('step');
let prevBtn = document.getElementById('prev-btn');
let nextBtn = document.getElementById('next-btn');
let submitBtn = document.getElementById('submit-btn');
let form = document.getElementsByTagName('form')[0];
let preloader = document.getElementById('preloader-wrapper');
let bodyElement = document.querySelector('body');
let succcessDiv = document.getElementById('success');
form.onsubmit = () => {
return false
}
let current_step = 0;
let stepCount = 8
step[current_step].classList.add('d-block');
if (current_step == 0) {
prevBtn.classList.add('d-none');
submitBtn.classList.add('d-none');
nextBtn.classList.add('d-inline-block');
}
const progress = (value) => {
document.getElementsByClassName('progress-bar')[0].style.width = `${value}%`;
}
nextBtn.addEventListener('click', () => {
current_step++;
let previous_step = current_step - 1;
if ((current_step > 0) && (current_step <= stepCount)) {
prevBtn.classList.remove('d-none');
prevBtn.classList.add('d-inline-block');
step[current_step].classList.remove('d-none');
step[current_step].classList.add('d-block');
step[previous_step].classList.remove('d-block');
step[previous_step].classList.add('d-none');
if (current_step == stepCount) {
submitBtn.classList.remove('d-none');
submitBtn.classList.add('d-inline-block');
nextBtn.classList.remove('d-inline-block');
nextBtn.classList.add('d-none');
}
} else {
if (current_step > stepCount) {
form.onsubmit = () => {
return true
}
}
}
progress((100 / stepCount) * current_step);
});
prevBtn.addEventListener('click', () => {
if (current_step > 0) {
current_step--;
let previous_step = current_step + 1;
prevBtn.classList.add('d-none');
prevBtn.classList.add('d-inline-block');
step[current_step].classList.remove('d-none');
step[current_step].classList.add('d-block')
step[previous_step].classList.remove('d-block');
step[previous_step].classList.add('d-none');
if (current_step < stepCount) {
submitBtn.classList.remove('d-inline-block');
submitBtn.classList.add('d-none');
nextBtn.classList.remove('d-none');
nextBtn.classList.add('d-inline-block');
prevBtn.classList.remove('d-none');
prevBtn.classList.add('d-inline-block');
}
}
if (current_step == 0) {
prevBtn.classList.remove('d-inline-block');
prevBtn.classList.add('d-none');
}
progress((100 / stepCount) * current_step);
});
submitBtn.addEventListener('click', () => {
preloader.classList.add('d-block');
const timer = ms => new Promise(res => setTimeout(res, ms));
timer(5)
.then(() => {
bodyElement.classList.add('loaded');
}).then(() => {
step[stepCount].classList.remove('d-block');
step[stepCount].classList.add('d-none');
prevBtn.classList.remove('d-inline-block');
prevBtn.classList.add('d-none');
submitBtn.classList.remove('d-inline-block');
submitBtn.classList.add('d-none');
succcessDiv.classList.remove('d-none');
succcessDiv.classList.add('d-block');
})
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- FONT -->
<link href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
</head>
<body>
<div class="container d-flex align-items-center min-vh-100">
<!-- CONTAINER Starts-->
<div class="row g-0 justify-content-center">
<!--- row g-0 justify-content-center Starts-->
<div class="col-lg-4 offset-lg-1 mx-0 px-0">
<!-- TITLE Starts -->
<div id="title-container">
<!-- title-container Starts-->
<img class="covid-image" src="images/covid-check.png">
<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati molestiae voluptate atque, saepe maxime dolore cumque quidem veniam accusamus nulla commodi aut corporis, totam est molestias sed ea facere. Et?</p>
</div><!-- title-container Ends-->
</div><!-- TITLE Ends -->
<div class="col-lg-7 mx-0 px-0">
<!-- FORMS Starts -->
<div class="progress">
<!--progress Starts-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 0%"></div>
</div>
<div id="qbox-container">
<form class="needs-validation" id="form-wrapper" method="post" action="action.php" name="form-wrapper" novalidate>
<div id="steps-container">
<fieldset>
<div class="step">
<h4>Please Choose Lanuguage | رجاء اختيار اللغة </h4>
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<input class="form-check-input question__input" id="q_1_yes" name="q_1" type="radio" value="Yes">
<label class="form-check-label question__label" for="q_1_yes">Englsih</label>
</div>
<div class="q-box__question">
<input checked class="form-check-input question__input" id="q_1_no" name="q_1" type="radio" value="No">
<label class="form-check-label question__label" for="q_1_no">Arabic</label>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="step d-none">
<h4>Do You want to mention Your Name</h4>
<div class="form-check ps-0 q-box">
<div class="row">
<div class="col">
<div class="q-box__question">
<input class="form-check-input question__input" id="q_2_yes" name="q_2" type="radio" value="Yes">
<label class="form-check-label question__label" for="q_2_yes">Yes</label>
</div>
</div>
<div class="col">
<div class="q-box__question">
<input checked class="form-check-input question__input" id="q_2_no" name="q_2" type="radio" value="No">
<label class="form-check-label question__label" for="q_2_no">No</label>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="step d-none">
<h4>Please Write Your Name and Employee #</h4>
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<div class="row">
<div class="col">
<label for="inputEmail4">Employee Name</label>
<input type="name" class="form-control" placeholder="Employee Name">
</div>
<div class="col">
<label for="inputPassword4"> Employee Number # </label>
<input type="text" class="form-control" placeholder="Employee Number #">
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="step d-none">
<h4>Please Select one of the folowing options</h4>
<div class="row">
<div class="col-lg-12">
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<input class="form-check-input question__input q-checkbox" id="q_4_right" name="q_4" type="radio" value="uk">
<label class="form-check-label question__label" for="q_4_right">
Doing the right thing ! <br>
<p class="lead">Reaporting someting you see wrong</p>
</label>
</div>
</div>
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<input class="form-check-input question__input q-checkbox" id="q_4_ideas" name="q_4" type="radio" value="j">
<label class="form-check-label question__label" for="q_4_ideas">Share your Ideas <br>
<p class="lead">Let us know if you have a great suggestion</p>
</label>
</div>
</div>
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<input class="form-check-input question__input" id="q_4_views" name="q_4" type="radio" value="us">
<label class="form-check-label question__label" for="q_4_views">Air your Views <br>
<p class="lead"> Tell us what's frusting you in the work place</p>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="step d-none">
<h4>Donig the right thing</h4>
<p>Reporting someting you see wrong
if you see or suspect someone or something being done wrong that is having a negative impact or harming the association please share your concern</p>
<div class="row">
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<label for="floatingTextarea2">Comments</label>
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
</div>
</div>
</div>
</div>
<div class="step d-none">
<h4>Share your Ideas</h4>
<p>Did you know some of our best ideas have come from our colleagues? if you thing you have a great idea that can help the assocation to perform better , we would love to hear from you</p>
<div class="row">
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<label for="floatingTextarea2">your Ideas!</label>
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
</div>
</div>
</div>
</div>
<div class="step d-none">
<h4>Air your views</h4>
<p>We all work hard and deserve tp be treated well, we have some very good, robst employment and operational policies and procedures to support and protect you,but if there is something that we have done wrong or is frustrating you we would like to hear from you about this , so we can look to the issue and rectify,where possible</p>
<div class="row">
<div class="form-check ps-0 q-box">
<div class="q-box__question">
<label for="floatingTextarea2">Your Views</label>
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
</div>
</div>
</div>
</div>
</fieldset>
<div class="step d-none">
<h4>Incident Reported on:</h4>
<div class="row">
<div class="col">
<label class="form-label">REPORTED PERSON</label>
<input type="text" class="form-control" placeholder="Reported Person">
</div>
<div class="col">
<label class="form-label">REPORTED EMPLOYEE #</label>
<input type="text" class="form-control" placeholder="Reported Employee #">
</div>
</div>
<div class="mt-2">
<label class="form-label">INCIDENT TYPE </label>
<select class="form-select" aria-label="Default select example">
<option selected>Select Incident Type</option>
<option value="1">THEFT</option>
<option value="2">NON COMPLIANCE WITH COMPANY POLICY</option>
<option value="3">FRAUD</option>
<option value="3">ABUSING POWER</option>
<option value="3">USING COMPANY PROPERTY FOR PERSONAL INTEREST</option>
<option value="3">NEGLIGENCE</option>
</select>
</div>
<div class="mt-2">
<label for="exampleFormControlTextarea1">INCIDENT DETAILS </label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="mt-2">
<label class="form-label">INCIDENT CITY</label>
<select class="form-select" aria-label="Default select example">
<option selected>Select Incident City</option>
<option value="1">Beirut</option>
<option value="2">Bekaa</option>
</select>
</div>
<div class="mt-2">
<div class="row">
<div class="col">
<label for="formFileMultiple" class="form-label">UPLOAD ATTACHEMENT </label>
<input class="form-control" type="file" id="formFileMultiple" multiple />
</div>
<div class="col">
<label for="" class="form-label">INCIDENT DATE</label>
</div>
</div>
<div class="mt-4">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">I confirm that, all above provided information is correct.</label>
</div>
</div>
</div>
</div>
<div class="step d-none">
<div class="mt-1">
<div class="closing-text">
<h4>Thank you</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut omnis explicabo doloribus at iste magni maiores impedit, nam eum reprehenderit facere aliquid ipsa labore sed? Dolorem eveniet recusandae molestiae at.</p>
<p>Click on the submit button to continue.</p>
</div>
</div>
</div>
<div id="success">
<div class="mt-5">
<h4>Success! We'll get back to you ASAP!</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur deleniti eius ab totam quaerat illo perferendis, eum veritatis rerum tempore impedit. Saepe dolores eligendi eum culpa beatae, id doloribus ipsum.</p>
<a class="back-link" href="">Go back from the beginning ➜</a>
</div>
</div>
</div>
<div id="q-box__buttons">
<button id="prev-btn" type="button">Previous</button>
<button id="next-btn" type="button">Next</button>
<button id="submit-btn" type="submit">Submit</button>
</div>
</form>
</div>
<!--progress Starts-->
</div><!-- FORMS Ends -->
</div>
<!--- row g-0 justify-content-center Ends-->
</div><!-- CONTAINER ends -->
<div id="preloader-wrapper">
<!-- preloader-wrapper Starts-->
<div id="preloader"></div>
<div class="preloader-section section-left"></div>
<div class="preloader-section section-right"></div>
</div><!-- preloader-wrapper Starts-->
<script src="js/script.js"></script>
</body>
</html>

My toggle tab using bootstrap is not working

My toggle tabs are not working even though I got the code off of the internet
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="register.css" rel="stylesheet">
</head>
<body>
<div class="container register">
<div class="row">
<div class="col-md-9 register-right">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item active">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#cust">Customer</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#rest">Restaurant</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="cust" role="tabpanel">
<h3 class="register-heading">Registration for customers</h3>
<div class="row register-form">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="First Name *" value="" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Last Name *" value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password *" value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Confirm Password *" value="" />
</div>
<div class="form-group">
<div class="maxl">
<label class="radio inline">
<input type="radio" name="gender" value="male" checked>
<span> Male </span>
</label>
<label class="radio inline">
<input type="radio" name="gender" value="female">
<span>Female </span>
</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" placeholder="Your Email *" value="" />
</div>
<div class="form-group">
<input type="text" minlength="10" maxlength="10" name="txtEmpPhone" class="form-control" placeholder="Your Phone *" value="" />
</div>
<div class="form-group">
<select class="form-control">
<option class="hidden" selected disabled>Please select meal your option</option>
<option>Vegetarian</option>
<option>Non Vegetarian</option>
</select>
</div>
<input type="submit" class="btnRegister" value="Register"/>
</div>
</div>
</div>
<div class="tab-pane fade" id="rest" role="tabpanel">
<h3 class="register-heading">Register your restaurant</h3>
<div class="row register-form">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Restaurant Name *" value="" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Address *" value="" />
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email *" value="" />
</div>
<div class="form-group">
<input type="text" maxlength="10" minlength="10" class="form-control" placeholder="Phone *" value="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="password" class="form-control" placeholder="Password *" value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Confirm Password *" value="" />
</div>
<input type="submit" class="btnRegister" value="Register" />
</div>
The first tab is showing by default but I'm not able to switch to the other one. I went to the developers tools section and there weren't any errors.
I am using bootstrap v4 by the way. I have tried changing the position of the links, as someone recommeded in a different question but it didn't work for me.

I'm not sure what is the problem with your code, But when i customize in my code then it was worked for me, Please review my code and let me know if you have any question.
Hope it will work for you.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item active">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#cust" role="tab" >
Customer
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#rest" role="tab">
Restaurant
</a>
</li>
</ul>
<div class="tab-content">
<div id="cust" class="tab-pane in active">
<h3>Register your customer</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="rest" class="tab-pane fade">
<h3 class="register-heading">Register your restaurant</h3>
<div class="row register-form">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Restaurant Name *" value="" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Address *" value="" />
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email *" value="" />
</div>
<div class="form-group">
<input type="text" maxlength="10" minlength="10" class="form-control" placeholder="Phone *" value="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="password" class="form-control" placeholder="Password *" value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Confirm Password *" value="" />
</div>
<input type="submit" class="btnRegister" value="Register"/>
</div>
</div>
</div>
</div>
</div>

Bootstrap Horizontal Form label along with a muted caption

In the following Bootstrap Horizontal form if I want to add a caption right below Order label as <small class="text-muted">Must be at least 200</small> where do I place it? NOTE: Question is related to how to place a muted caption in small muted font right underneath a Bootstrap horizontal form's label. I know the role of placeholder attribute but in actual app I do need to place such a caption underneath a form's label.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>

You can put wrap the <label> with a new div, move the col-sm-2 to that div and add the small element inside:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<div class="col-sm-2">
<label class="control-label" for="email">Email:</label><br />
<small class="text-muted">Must be at least 200</small>
</div>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<label class="control-label" for="pwd">Password:</label><br />
<small class="text-muted">Must be at least 200</small>
</div>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
Open in Full page to see the actual result