Bootstrap Snippet Put Placeholder Text Using jQuery using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
<!-- put the jquery in your header or footer -->
<div class="background">
  <div class="form-group">
    <label for="your-name">Name:</label>
    <input type="text" name="your-name" id="your-name" value="" size="40" class="form-control">
  </div>
</div>
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
.background {
    width: 100%;
    float: left;
    background: #b30838;
    height: 415px;
    padding-top: 20px;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
    color: #fff;
    float: left;
  padding-top:12px;
  padding-right:10px;
  padding-left:10px;
    vertical-align: top;
}
.form-group {
    border: 1px solid #fff;
    margin-left: 25px;
    border-radius: 1%;
}
.form-control {
    display: block;
    margin: 1%;
  min-height:30px;
  border:1px solid #ffffff;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
$(document).ready(function() {
  $("#your-name").attr("placeholder", "Your Name");  
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Put Placeholder Text Using jQuery"
Bootstrap 4.1.1 Snippet by sunil8107

Related: See More

Questions / Comments:

"Put Placeholder Text Using jQuery" Bootstrap 4.1.1 Snippet by sunil8107

Related: See More

Questions / Comments:

"Put Placeholder Text Using jQuery"
Bootstrap 4.1.1 Snippet by sunil8107