Ive already made my sign in modal, however im trying to add buttons to the top, one button navigating to register/sign up, and the other button leading to the sign in modal, as represented by the picture i added here.Picture of sign in modal. (i recommend you look at it to better clarify what I’m trying to do
I went on the official bootstrap docs, however i do not see anything about adding nav buttons to my modal.
If anyone has any tips/ code i could try, please let me know. thanks in advance! (I posted the HTML code and CSS code below.)
<!-- Sign Up Modal -->
<div class="modal fade signup-modal" id="signupModal" tabindex="-1" aria-labelledby="Sign Up" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content rounded-4 signup-modal-background">
<div class="modal-header p-5 pt-4 pb-0 border-bottom-0">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<hr>
<div class="modal-header p-5 pt-0 pb-0 border-bottom-0 end-50">
<h2 class="fw-bold mb-0 fs-2 text-center">Register your Account</h2>
</div>
<div class="modal-header p-5 pb-0 pt-1 border-bottom-0">
<h5 class="fw-normal mb-0 text-center">Lets get started with your account</h5>
</div>
<hr>
<div class="modal-body p-5 pt-0 pb-0">
<form class="">
<div class="form-floating mb-3">
<input type="text" class="form-control rounded-3 cbs-form input-group-custom-field" id="usernameInput" placeholder="Username" autocomplete="on" required>
<label for="usernameInput">Username</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control rounded-3 cbs-form input-group-custom-field" id="emailInput" placeholder="[email protected]" autocomplete="on" required>
<label for="emailInput">Email address</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control rounded-3 cbs-form input-group-custom-field" id="passwordInput" placeholder="Password" autocomplete="on" required>
<label for="passwordInput">Password</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control rounded-3 cbs-form input-group-custom-field" id="confirmPasswordInput" placeholder="Password-Confirm" autocomplete="on" required>
<label for="confirmPasswordInput">Confirm Password</label>
</div>
<input class="" type="checkbox" id="agreementCheckbox" name="Agreement Checkbox" required>
<label class="text-center d-inline" for="agreementCheckbox"><span>I agree to the <a class="gray text-links tooltip-test" title="Terms and Conditions" href="https://www.termsfeed.com/live/7f2a7964-ad07-4450-9cc5-b4435160db61">Terms and Conditions</a> and <a class="gray text-links tooltip-test" title="Privacy Policy" href="https://www.termsfeed.com/live/51c49715-5a49-477f-aa7b-d431b74dde6c">Privacy Policy</a></span></label>
<button class="w-100 mb-2 mt-2 btn btn-lg rounded-3 btn btn1" type="submit">Next</button>
<div class="text-center">
<p>Already have an account?<a title="Sign In" href="login.php" class="gray text-links">
Sign In
</a>
</p>
</div>
</form>
</div>
<div class="modal-footer p-5 pt-1 pb-2">
<h2 class="fs-5 fw-bold mb-3 text-center pb-0">Use a third-party to create your account.</h2>
<button class="w-100 py-2 mb-2 btn rounded-3 border google-signup" type="submit">
Continue with Google
</button>
<button class="w-100 py-2 mb-2 btn rounded-3 border google-signup" type="submit">
Continue with Google
</button>
<button class="w-100 py-2 mb-2 btn rounded-3 border google-signup" type="submit">
Continue with Google
</button>
</div>
</div>
</div>
</div>
/* Sign up Modal */
.signup-modal-background {
background-color: #222022;
}
You can use button-group for that. Please add below button-group link code in your modal header.
<div class="btn-group">
<a href="#" class="btn btn-outline-primary active" aria-current="page">Register</a>
<a href="#" class="btn btn btn-outline-primary">Sign In</a>
</div>