In the ever-evolving landscape of web design, creating an engaging Facebook login page is crucial for ensuring a seamless user experience. The use of Bootstrap, a powerful front-end framework, adds an extra layer of finesse to your design, making it not only visually appealing but also highly functional. In this comprehensive guide, we’ll delve into the intricacies of crafting a Facebook login page that stands out, captivates your audience, and contributes to an improved website ranking on Google.
Empowering Design with Bootstrap
Bootstrap, the open-source toolkit developed by Twitter, has become a staple in web development circles for its responsiveness and ease of use. Leveraging the power of Bootstrap for your Facebook login page ensures a consistent and visually appealing design across various devices. This adaptability is crucial in today’s mobile-centric world, where users access websites from a myriad of devices.
Getting Started: Setting Up Your Environment
Creating the Foundation
Begin with a basic HTML structure and include the necessary Bootstrap classes to ensure responsiveness. Consider the following example:
<div class="login-page-data">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="login-data">
<img src="https://static.xx.fbcdn.net/rsrc.php/y1/r/4lCu2zih0ca.svg" class="img-fluid fb-img">
<h2>
Facebook helps you connect and share with the people in your life.
</h2>
</div>
</div>
<div class="col-lg-5 col-md-6">
<div class="login-container">
<form>
<div class="mb-3">
<input type="text" class="form-control" id="email" placeholder="Email or Phone">
</div>
<div class="mb-3">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="d-flex justify-content-center">
<button class="btn login-btn btn-block">Log in</button>
</div>
<div class="text-center mt-3">
<a href="#">Forgotten account?</a>
</div>
</form>
<div class="divider">
<span class="or">or</span>
</div>
<div class="d-flex justify-content-center">
<button class="btn signup-btn btn-block">Create New Account</button>
</div>
</div>
<p class="text-center mt-3"><a href="#">Create a Page</a> for a celebrity, brand or business.</p>
</div>
</div>
</div>
</div>
Sharing is Caring – Full Source Code
To ensure our users understand we provide the full source code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Facebook Login page Design with Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
body
{
background-color: #f0f2f5;
}
.login-page-data a
{
text-decoration: none;
}
.login-data h2
{
font-family: SFProDisplay-Regular, Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: normal;
line-height: 32px;
}
.fb-img
{
height: 90px;
}
.login-container
{
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 100px;
}
.login-container a
{
text-decoration: none;
}
.login-container input[type="text"],
.login-container input[type="password"]
{
width: 100%;
font-size: 17px;
padding: 14px 16px;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
border-radius: 4px;
transition: ease-in-out, width .35s ease-in-out;
}
.login-btn
{
background-color: #1877f2;
border: none;
border-radius: 6px;
font-size: 20px;
line-height: 48px;
padding: 0 16px;
width: 332px;
color: #fff;
font-weight: 700;
transition: 200ms cubic-bezier(.08,.52,.52,1) background-color, 200ms cubic-bezier(.08,.52,.52,1) box-shadow, 200ms cubic-bezier(.08,.52,.52,1) transform;
}
.login-btn:hover
{
background-color: #365899;
color: #fff;
}
.signup-btn
{
background-color: #42b72a;
border: none;
border-radius: 6px;
font-size: 16px;
line-height: 48px;
padding: 0 16px;
width: 332px;
color: #fff;
font-weight: 700;
}
.signup-btn:hover
{
background-color: #36a420;
border-color: #36a420;
color: #fff;
}
.login-container .divider
{
margin: 20px 0;
text-align: center;
position: relative;
}
.login-container .divider::before,
.login-container .divider::after
{
content: "";
height: 1px;
background-color: #ddd;
width: 40%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.login-container .divider::before
{
right: 0;
margin-right: 15px;
}
.login-container .divider::after
{
left: 0;
margin-left: 15px;
}
.login-container .or
{
display: inline-block;
background-color: #f0f2f5;
position: relative;
padding: 0 10px;
font-weight: bold;
}
@media screen and (max-width: 991px)
{
.login-data
{
padding: 20px;
}
.login-data img
{
margin: auto;
display: flex;
justify-content: center;
text-align: center;
}
.login-data h2
{
font-size: 24px;
line-height: 28px;
}
}
@media screen and (max-width: 768px)
{
.login-data img
{
margin: auto;
display: flex;
justify-content: center;
text-align: center;
}
.login-data h2
{
font-size: 24px;
line-height: 28px;
}
.login-container
{
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top:30px;
}
}
@media screen and (max-width: 560px)
{
.login-data img
{
margin: auto;
display: flex;
justify-content: center;
text-align: center;
}
.login-data h2
{
font-size: 24px;
line-height: 28px;
}
.login-container
{
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top:30px;
}
}
</style>
</head>
<body>
<div class="login-page-data">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="login-data">
<img src="https://static.xx.fbcdn.net/rsrc.php/y1/r/4lCu2zih0ca.svg" class="img-fluid fb-img">
<h2>
Facebook helps you connect and share with the people in your life.
</h2>
</div>
</div>
<div class="col-lg-5 col-md-6">
<div class="login-container">
<form>
<div class="mb-3">
<input type="text" class="form-control" id="email" placeholder="Email or Phone">
</div>
<div class="mb-3">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="d-flex justify-content-center">
<button class="btn login-btn btn-block">Log in</button>
</div>
<div class="text-center mt-3">
<a href="#">Forgotten account?</a>
</div>
</form>
<div class="divider">
<span class="or">or</span>
</div>
<div class="d-flex justify-content-center">
<button class="btn signup-btn btn-block">Create New Account</button>
</div>
</div>
<p class="text-center mt-3"><a href="#">Create a Page</a> for a celebrity, brand or business.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Now, for more web development tips and resources, be sure to check out our website. Happy coding!
Conclusion
In conclusion, the fusion of a captivating Facebook login page design with the powerful capabilities of Bootstrap can significantly elevate your website’s user experience and search engine ranking. By paying attention to visual elements, responsive design, and SEO best practices, you not only create a compelling entry point for users but also cater to Google’s criteria for ranking high-quality websites.
