
Now a days Bootstrap is the best platform for Website Designing, it is a collection of classes and grid system.
In This article we will learn how to create Responsive Login Page in Bootstrap.

HTML
<div class="container-fluid">
<div class="row height ">
<div class="col-md-3 mylogo"><h1 style="color:rgba(255,102,0,1);">SCHAUHAN.IN</h1></div>
<div class="col-md-9 txt-right">
<ul class="mysocial ">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<!--Second-->
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-7 hide1">
<h3 class="txt2">Lorem Ipsum is <strong><span style="color:rgba(255,102,0,1);">simply dummy text of</span></strong></h3>
<p class="txt1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br /><br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since.</p>
</div>
<div class="col-md-5">
<div class="log_container">
<h2 class="align c1">Beautiful Responsive Login Page</h2>
<div class="form-group">
<input name="" type="text" class="form-control input-box" placeholder="Username" />
</div>
<div class="form-group">
<input name="" type="text" class="form-control input-box" placeholder="Password" />
</div>
<div class="form-group centre">
<input type="button" class="btn btn-danger mybt1" value="LOGIN" />
</div>
<div class="form-group centre">
<input type="button" class="mybt" value="GET PASSWORD" />
</div>
</div>
</div>
</div>
</div>
<!--End Second-->
</div>
</div>
<div class="container-fluid footer">
©2018 schauhan.in All Right Reserved.
</div>
Put This Code in The Head Section Of Your Page
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
CSS
/*!
Beautiful Responsive Login Page Using Bootstrap
Made By (www.schgauhan.in)
*/
body
{
margin:0px;
padding:0px;
background:url(../bg.jpg);
font-family: 'Oswald', sans-serif;
}
.hide
{
display:block;
}
h1,h2,h3,h4,h5,h6,p
{
margin:0px;
padding:0px;
}
.txt-right
{
text-align:right;
}
.mysocial
{
list-style:none;
text-align:right;
}
.mysocial li
{
text-align:center;
vertical-align:middle;
display:inline-block;
width:30px;
height:30px;
background:#fff;
border-radius:100%;
}
.mysocial li i
{
padding-top:8px;
}
.height
{
height:70px;
margin-top:20px;
}
.log_container
{
background:rgba(0,0,0,0.1);
padding:40px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75);
}
.align
{
text-align:center;
}
.c1
{
color:#f2f2f2;
padding-bottom:40px;
font-size:24px;
}
.txt1
{
font-size:16px;
color:#fff;
}
.txt2
{
color:#fff;
font-size:45px;
margin-top:100px;
padding-bottom:40px;
}
.centre
{
text-align:center;
}
.mybt
{
border-radius:10px;
border:1px solid #f2f2f2;
background:none;
font-size:12px;
padding:8px;
width:120px;
color:rgba(0,102,255,1);
margin-top:40px;
}
.mybt1
{
padding:8px;
width:90px;
}
.input-box {
width: 100%;
margin-top: 25px;
margin-bottom: 25px;
height: 45px;
background: #000000;
border-radius: 3px;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
box-shadow: inherit;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.input-box:focus,
.input-box:active {
box-shadow: inherit;
color: #ffffff;
}
.footer
{
width:100%;
line-height:50px;
text-align:center;
height:50px;
background:#f2f2f2;
position:fixed;
bottom:0;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
.txt1
{
display:none;
}
.txt-right
{
display:none;
}
.txt2
{
margin-top:0px;
}
.mylogo
{
text-align:center;
}
}
One Reply to “How to Create Responsive Login Page Using Bootstrap”
Comments are closed.