Modals
Component #1
Log in
Don't have an account yet? Sign up
Log in with Google
Log in
Don't have an account yet? Sign up
Sign up
Already have an account? Log in
Sign up
Already have an account? Log in
Forgot password?
Enter the email address you used when you joined and we'll send you instructions to reset your password.
Trusted by the world's best teams
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#signupModal">Sign up modal</button>
<!-- Modal -->
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-close">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<!-- Log in -->
<div id="signupModalFormLogin" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h2>Log in</h2>
<p>Don't have an account yet?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormSignup",
"groupName": "idForm"
}'>Sign up</a>
</p>
</div>
<!-- End Heading -->
<div class="d-grid gap-2">
<a class="btn btn-white btn-lg" href="#">
<span class="d-flex justify-content-center align-items-center">
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
Log in with Google
</span>
</a>
<a class="js-animation-link btn btn-primary btn-lg" href="#"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormLoginWithEmail",
"groupName": "idForm"
}'>Log in with Email</a>
</div>
</div>
<!-- End Log in -->
<!-- Log in with Modal -->
<div id="signupModalFormLoginWithEmail" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h2>Log in</h2>
<p>Don't have an account yet?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormSignup",
"groupName": "idForm"
}'>Sign up</a>
</p>
</div>
<!-- End Heading -->
<form class="js-validate needs-validation" novalidate>
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="signupModalFormLoginEmail">Your email</label>
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormLoginEmail" placeholder="email@site.com" aria-label="email@site.com" required>
<span class="invalid-feedback">Please enter a valid email address.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="signupModalFormLoginPassword">Password</label>
<a class="js-animation-link form-label-link" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormResetPassword",
"groupName": "idForm"
}'>Forgot Password?</a>
</div>
<input type="password" class="form-control form-control-lg" name="password" id="signupModalFormLoginPassword" placeholder="8+ characters required" aria-label="8+ characters required" required minlength="8">
<span class="invalid-feedback">Please enter a valid password.</span>
</div>
<!-- End Form -->
<div class="d-grid mb-3">
<button type="submit" class="btn btn-primary form-control-lg">Log in</button>
</div>
</form>
</div>
<!-- End Log in with Modal -->
<!-- Sign up -->
<div id="signupModalFormSignup">
<!-- Heading -->
<div class="text-center mb-7">
<h2>Sign up</h2>
<p>Already have an account?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormLogin",
"groupName": "idForm"
}'>Log in</a>
</p>
</div>
<!-- End Heading -->
<div class="d-grid gap-3">
<a class="btn btn-white btn-lg" href="#">
<span class="d-flex justify-content-center align-items-center">
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
Sign up with Google
</span>
</a>
<a class="js-animation-link btn btn-primary btn-lg" href="#"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormSignupWithEmail",
"groupName": "idForm"
}'>Sign up with Email</a>
<div class="text-center">
<p class="small mb-0">By continuing you agree to our <a href="#">Terms and Conditions</a></p>
</div>
</div>
</div>
<!-- End Sign up -->
<!-- Sign up with Modal -->
<div id="signupModalFormSignupWithEmail" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h2>Sign up</h2>
<p>Already have an account?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormLogin",
"groupName": "idForm"
}'>Log in</a>
</p>
</div>
<!-- End Heading -->
<form class="js-validate need-validate" novalidate>
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="signupModalFormSignupEmail">Your email</label>
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormSignupEmail" placeholder="email@site.com" aria-label="email@site.com" required>
<span class="invalid-feedback">Please enter a valid email address.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="signupModalFormSignupPassword">Password</label>
<input type="password" class="form-control form-control-lg" name="password" id="signupModalFormSignupPassword" placeholder="8+ characters required" aria-label="8+ characters required" required>
<span class="invalid-feedback">Your password is invalid. Please try again.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3" data-hs-validation-validate-class>
<label class="form-label" for="signupModalFormSignupConfirmPassword">Confirm password</label>
<input type="password" class="form-control form-control-lg" name="confirmPassword" id="signupModalFormSignupConfirmPassword" placeholder="8+ characters required" aria-label="8+ characters required" required
data-hs-validation-equal-field="#signupModalFormSignupPassword">
<span class="invalid-feedback">Password does not match the confirm password.</span>
</div>
<!-- End Form -->
<div class="d-grid mb-3">
<button type="submit" class="btn btn-primary form-control-lg">Sign up</button>
</div>
<div class="text-center">
<p class="small mb-0">By continuing you agree to our <a href="#">Terms and Conditions</a></p>
</div>
</form>
</div>
<!-- End Sign up with Modal -->
<!-- Reset Password -->
<div id="signupModalFormResetPassword" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h2>Forgot password?</h2>
<p>Enter the email address you used when you joined and we'll send you instructions to reset your password.</p>
</div>
<!-- En dHeading -->
<form class="js-validate need-validate" novalidate>
<div class="mb-3">
<!-- Form -->
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="signupModalFormResetPasswordEmail" tabindex="0">Your email</label>
<a class="js-animation-link form-label-link" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormLogin",
"groupName": "idForm"
}'>
<i class="bi-chevron-left small"></i> Back to Log in
</a>
</div>
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormResetPasswordEmail" tabindex="1" placeholder="Enter your email address" aria-label="Enter your email address" required>
<span class="invalid-feedback">Please enter a valid email address.</span>
<!-- End Form -->
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary form-control-lg">Submit</button>
</div>
</form>
</div>
<!-- End Reset Password -->
</div>
<!-- End Body -->
<!-- Footer -->
<div class="modal-footer d-block text-center py-sm-5">
<small class="text-cap mb-4">Trusted by the world's best teams</small>
<div class="w-85 mx-auto">
<div class="row justify-content-between">
<div class="col">
<img class="img-fluid" src="../assets/svg/brands/gitlab-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col">
<img class="img-fluid" src="../assets/svg/brands/fitbit-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col">
<img class="img-fluid" src="../assets/svg/brands/flow-xo-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col">
<img class="img-fluid" src="../assets/svg/brands/layar-gray.svg" alt="Logo">
</div>
<!-- End Col -->
</div>
</div>
<!-- End Row -->
</div>
<!-- End Footer -->
</div>
</div>
</div>
<!-- End Modal -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
<script src="../assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js"></script>
<!-- JS Front -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF BOOTSTRAP VALIDATION
// =======================================================
HSBsValidation.init('.js-validate', {
onSubmit: data => {
data.event.preventDefault()
alert('Submited')
}
})
// INITIALIZATION OF SHOW ANIMATIONS
// =======================================================
new HSShowAnimation('.js-animation-link')
// INITIALIZATION OF TOGGLE PASSWORD
// =======================================================
new HSTogglePassword('.js-toggle-password')
})()
</script>
Component #2
Log in to Front
Login to manage your account
Sign up
Fill out the form to get started
Forgot password
Instructions will be sent to you
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#loginModal">Log in modal</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-close">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<!-- Log in -->
<div id="loginModalFormLogin">
<!-- Heading -->
<div class="text-center mb-7">
<h3 class="modal-title">Log in to Front</h3>
<p>Login to manage your account</p>
</div>
<!-- End Heading -->
<form class="js-validate needs-validation" novalidate>
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="loginModalFormLoginEmail">Your email</label>
<input type="email" class="form-control" name="email" id="loginModalFormLoginEmail" placeholder="email@site.com" aria-label="email@site.com" required>
<span class="invalid-feedback">Please enter a valid email address.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="loginModalFormLoginPassword">Password</label>
<a class="js-animation-link form-label-link" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#loginModalFormResetPassword",
"groupName": "idForm"
}'>Forgot Password?</a>
</div>
<input type="password" class="form-control form-control-lg" name="password" id="loginModalFormLoginPassword" placeholder="8+ characters required" aria-label="8+ characters required" required minlength="8">
<span class="invalid-feedback">Please enter a valid password.</span>
</div>
<!-- End Form -->
<div class="d-grid gap-3 text-center">
<button type="submit" class="btn btn-primary btn-lg">Log in</button>
<span class="divider-center">OR</span>
<button type="submit" class="btn btn-ghost-secondary">
<span class="d-flex justify-content-center align-items-center">
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
Log in with Google
</span>
</button>
<p>Don't have an account yet?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#loginModalFormSignup",
"groupName": "idForm"
}'>Sign up</a>
</p>
</div>
</form>
</div>
<!-- End Log in -->
<!-- Log in -->
<div id="loginModalFormSignup" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h3 class="modal-title">Sign up</h3>
<p>Fill out the form to get started</p>
</div>
<!-- End Heading -->
<form class="js-validate needs-validation" novalidate>
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="loginModalFormSignupEmail">Your email</label>
<input type="email" class="form-control form-control-lg" name="email" id="loginModalFormSignupEmail" placeholder="email@site.com" aria-label="email@site.com" required>
<span class="invalid-feedback">Please enter a valid email address.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="loginModalFormSignupPassword">Password</label>
<input type="password" class="form-control form-control-lg" name="password" id="loginModalFormSignupPassword" placeholder="8+ characters required" aria-label="8+ characters required" required>
<span class="invalid-feedback">Your password is invalid. Please try again.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3" data-hs-validation-validate-class>
<label class="form-label" for="loginModalFormSignupConfirmPassword">Confirm password</label>
<input type="password" class="form-control form-control-lg" name="confirmPassword" id="loginModalFormSignupConfirmPassword" placeholder="8+ characters required" aria-label="8+ characters required" required
data-hs-validation-equal-field="#loginModalFormSignupPassword">
<span class="invalid-feedback">Password does not match the confirm password.</span>
</div>
<!-- End Form -->
<div class="text-center mb-3">
<p class="small mb-0">By continuing you agree to our <a href="#">Terms and Conditions</a></p>
</div>
<div class="d-grid gap-3 text-center">
<button type="submit" class="btn btn-primary btn-lg">Sign up</button>
<span class="divider-center">OR</span>
<button type="submit" class="btn btn-ghost-secondary">
<span class="d-flex justify-content-center align-items-center">
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
Sign up with Google
</span>
</button>
<p>Already have an account?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#loginModalFormLogin",
"groupName": "idForm"
}'>Log in</a>
</p>
</div>
</form>
</div>
<!-- End Log in -->
<!-- Reset Password -->
<div id="loginModalFormResetPassword" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h3 class="modal-title">Forgot password</h3>
<p>Instructions will be sent to you</p>
</div>
<!-- End Heading -->
<form class="js-validate needs-validation" novalidate>
<!-- Form -->
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="loginSignupModalFormResetPasswordEmail" tabindex="0">Your email</label>
<a class="js-animation-link form-label-link" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#loginModalFormLogin",
"groupName": "idForm"
}'>
<i class="bi-chevron-left small"></i> Back to Log in
</a>
</div>
<input type="email" class="form-control form-control-lg" name="email" id="loginSignupModalFormResetPasswordEmail" tabindex="1" placeholder="Enter your email address" aria-label="Enter your email address" required>
<span class="invalid-feedback">Please enter a valid email address.</span>
</div>
<!-- End Form -->
<div class="d-grid gap-3 text-center">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</form>
</div>
<!-- End Reset Password -->
</div>
<!-- End Body -->
</div>
</div>
</div>
<!-- End Modal -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
<script src="../assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js"></script>
<!-- JS Front -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF BOOTSTRAP VALIDATION
// =======================================================
HSBsValidation.init('.js-validate', {
onSubmit: data => {
data.event.preventDefault()
alert('Submited')
}
})
// INITIALIZATION OF SHOW ANIMATIONS
// =======================================================
new HSShowAnimation('.js-animation-link')
// INITIALIZATION OF TOGGLE PASSWORD
// =======================================================
new HSTogglePassword('.js-toggle-password')
})()
</script>