Post
Ask Question

Stylish Login Page in BootStrap

Include the necessary CSS and JS from online

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.    <head>  
  4.       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.       <meta name="viewport" content="width=device-width, initial-scale=1">  
  6.       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
  7.       <title>Stylish Login Page</title>  
  8.       <!-- Latest compiled and minified CSS -->  
  9.       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
  10.       <!-- Optional theme -->  
  11.       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">  
  12.       <!-- Normalize -->  
  13.       <link rel="stylesheet" href="normalize.css">  
  14.       <!-- Latest compiled and minified JavaScript -->  
  15.       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
  16.       <!-- Latest compiled and minified jquery 1.11.3 JavaScript -->  
  17.       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  18.       <style type="text/css">  
  19.          @import url(http://fonts.googleapis.com/css?family=Raleway:600);  
  20.          body {  
  21.              background-color: #000;  
  22.              margin: 0;  
  23.              padding: 0;  
  24.              height: 100%;  
  25.              width: 100%;  
  26.          }  
  27.          span {  
  28.              color: #fff;  
  29.              font-family: 'Raleway', sans-serif;  
  30.              font-size: 18px;  
  31.          }  
  32.          p {  
  33.              color: #fff;  
  34.              font-family: 'Raleway', sans-serif;  
  35.              font-size: 12px;  
  36.          }  
  37.          .col-centered {  
  38.              float: none;  
  39.              margin: 0 auto;  
  40.              margin-top: 250px;  
  41.          }  
  42.          .wrath-content-box {  
  43.              padding: 15px;  
  44.          }  
  45.          </style>  
  46.          </head>  
  47.          <body >  
  48.          <div class="container-fluid">  
  49.            <div class="row">  
  50.              <div class="col-lg-4 col-centered table-bordered ">  
  51.                <div class="wrath-content-box"> <span>Sign In</span> </div>  
  52.                <div class="wrath-content-box">  
  53.                  <div class="input-group"> <span class="input-group-addon btn-primary" id="basic-addon1"><span class="glyphicon glyphicon-user"></span></span>  
  54.                    <input type="text" class="form-control" placeholder="Username" />  
  55.                  </div>  
  56.                  <div class="clearfix"></div>  
  57.                  <br />  
  58.                  <div class="input-group"> <span class="input-group-addon btn-primary"" id="basic-addon1"><span class="glyphicon glyphicon-lock"></span> </span>  
  59.                    <input type="password" class="form-control" placeholder="Password" />  
  60.                  </div>  
  61.                  <div class="clearfix"></div>  
  62.                  <br />  
  63.           
  64.                  <div class="col-sm-6 text-right">  
  65.            
  66.                      <div class="form-group text-right">  
  67.                        <input type="submit" class="btn btn-success btn-sm form-control" value="Sign In" />  
  68.                     
  69.                      </div>  
  70.   
  71.                  </div>  
  72.                   <div class="col-sm-6 text-right">  
  73.            
  74.                      <div class="form-group text-right">  
  75.                        <input type="submit" class="btn btn-danger btn-sm form-control" value="cancel" />  
  76.                     
  77.                      </div>  
  78.   
  79.                  </div>  
  80.               <div class="clearfix"></div>  
  81.             </div>  
  82.           </div>  
  83.         </div>  
  84.       </div>  
  85.    </body>  
  86. </html>