Bootstrap Snippet Login Form w/ Shadow using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
      <div class="row">
        <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-5 col-md-offset-4 col-lg-4 col-lg-offset-4">
          <h3>Application Name</h3>
          
          <div class="panel panel-default box-shadow">
            <div class="panel-heading">
              <span class="text-primary">Authentication</span>
              <span class="text-muted pull-right today" title="Today"></span>              
            </div><!--.panel-heading-->
            <div class="panel-body">
              <form method="POST">
                <div class="form-group">
                  <label for="email">Email</label>
                  <div class="input-group">
                    <div class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></div>
                    <input autofocus required type="email" id="email" class="form-control" placeholder="Your email" tabindex="1">
                  </div>
                </div>
                <div class="form-group">
                  <label for="password">Password</label>
                  <a href="#forget-password" class="btn btn-xs btn-link" tabindex="4">Forget password?</a>
                  <div class="input-group">
                    <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div>
                    <input required type="password" class="form-control" placeholder="Your password" tabindex="2">
                  </div>
                </div>
                
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
body {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZmIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNjY2MiPjwvcmVjdD4KPC9zdmc+");
}
.box-shadow {
    -webkit-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);
    -moz-box-shadow:    0px 10px 20px 0px rgba(50, 50, 50, 0.52);
    box-shadow:         0px 10px 20px 0px rgba(50, 50, 50, 0.52)
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
$(document).ready(function() {
    var today = new Date().toDateString();
    $('.today').html(today);
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Login Form w/ Shadow"
Bootstrap 3.3.0 Snippet by hewerthomn

Related: See More

Questions / Comments:

"Login Form w/ Shadow" Bootstrap 3.3.0 Snippet by hewerthomn

Related: See More

Questions / Comments:

"Login Form w/ Shadow"
Bootstrap 3.3.0 Snippet by hewerthomn