How to Create Responsive Login Page Using Bootstrap

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;
}
}

Online Demo

Download Source Code