Scribd
Upload
14 views3 pages

Bootstrap 4 Login Modal Design

The document describes a modal login popup component with the following features: - It contains a form for email and password login with a submit button. - It also allows login via social media buttons for Twitter, Facebook, and LinkedIn. - At the bottom there is a message prompting users to sign up if they are not a member yet. - The component is built with HTML and CSS for styling and JavaScript for functionality like opening the modal.

Uploaded by

Bhushan Munjal
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views3 pages

Bootstrap 4 Login Modal Design

The document describes a modal login popup component with the following features: - It contains a form for email and password login with a submit button. - It also allows login via social media buttons for Twitter, Facebook, and LinkedIn. - At the bottom there is a message prompting users to sign up if they are not a member yet. - The component is built with HTML and CSS for styling and JavaScript for functionality like opening the modal.

Uploaded by

Bhushan Munjal
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

--Modal Popup-->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header border-bottom-0">
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">�</span>
</button>
</div>
<div class="modal-body">
<div class="form-title text-center">
<h4>Login</h4>
</div>
<div class="d-flex flex-column text-center">
<form>
<div class="form-group">
<input type="email" class="form-control"
id="email1"placeholder="Your email address...">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password1"
placeholder="Your password...">
</div>
<button type="button" class="btn btn-info btn-block btn-
round">Login</button>
</form>

<div class="text-center text-muted delimiter">or use a social


network</div>
<div class="d-flex justify-content-center social-buttons">
<button type="button" class="btn btn-secondary btn-round" data-
toggle="tooltip" data-placement="top" title="Twitter">
<i class="fab fa-twitter"></i>
</button>
<button type="button" class="btn btn-secondary btn-round" data-
toggle="tooltip" data-placement="top" title="Facebook">
<i class="fab fa-facebook"></i>
</button>
<button type="button" class="btn btn-secondary btn-round" data-
toggle="tooltip" data-placement="top" title="Linkedin">
<i class="fab fa-linkedin"></i>
</button>
</di>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<div class="signup-section">Not a member yet? <a href="/SignUp"
class="text-info"> Sign Up</a>.</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src='[Link]
<!-- Popper JS -->
<script
src='[Link]
cript>
<!-- Bootstrap JS -->
<script
src='[Link]
pt>
<script>
$(".open").on("click", function() {
$('#loginModal').modal('show');
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
});
</script>

/* Modal Popup */

.container {
padding: 2rem 0rem;
}

@media (min-width: 576px) {


.modal-dialog {
max-width: 400px;
}
.modal-dialog .modal-content {
padding: 1rem;
}
}
.modal-header .close {
margin-top: -1.5rem;
}

.form-title {
margin: -2rem 0rem 2rem;
}

.btn-round {
border-radius: 3rem;
}

.delimiter {
padding: 1rem;
}

.social-buttons .btn {
margin: 0 0.5rem 1rem;
}
.signup-section {
padding: 0.3rem 0rem;
}

You might also like