Bootstrap Snippet Login with show/hide password 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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid">
      <div class="row">
         <div class="well center-block">
            <div class="well-header">
               <center><img src="http://www.kisanpoint.com/mrb/includes/images/design_stuff/default_user_icon.png" class="img-thumbnail img-circle img-responsive" height="80px;" width="80px;"></center>
               <h1 class="text-center" style="color: white;">Login</h1><hr>
            </div>
            <div class="row">
               <div class="col-xs-12 col-sm-12 col-md-12">
                  <div class="row">
                     <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
.well
      {
         padding: 35px;
         padding-left: 30px;
         box-shadow: 0 0 50px #666666;
         margin: 7% auto 0;
         width: 450px;
         background: rgba(0.4, 0, 0, 0.4);
      }
      .btn1
      {
         background-color: #FF3838;
         color: white;
         transition: all 0.5s;
      }
      .btn1:hover, .btn1:focus
      {
         background-color: white;
         color: black;
         border: 1px solid;
         border-color: #FF3838;
         transition: 0.5s;
      }
      a:hover
      {
         text-decoration: none;
         color: red;
      }
      body
      {
         background: url('http://cdn.pcwallart.com/images/nature-wallpapers-high-resolution-wallpaper-4.jpg');
      }
      .well-header
      {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
  
$(document).ready(function(){
$('.pass_show').append('<span class="ptxt">Show</span>');  
});
  
$(document).on('click','.pass_show .ptxt', function(){ 
$(this).text($(this).text() == "Show" ? "Hide" : "Show"); 
$(this).prev().attr('type', function(index, attr){return attr == 'password' ? 'text' : 'password'; }); 
});  
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Login with show/hide password"
Bootstrap 3.3.0 Snippet by imsachin

Related: See More

Questions / Comments:

"Login with show/hide password" Bootstrap 3.3.0 Snippet by imsachin

Related: See More

Questions / Comments:

"Login with show/hide password"
Bootstrap 3.3.0 Snippet by imsachin