Bootstrap Snippet Email & Mobile verification using HTML CSS Bootstrap

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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-sm-6 col-sm-offset-2" ><!-- col -->
        <h2><h1>Check your email!</h1></h2>
        <p class="desc">We’ve sent a six-digit confirmation code to <strong>faisalkhan.chat@gmail.com</strong> & 987363506. Enter it below to confirm your email address and mobile number.</p>
        <br><br><br>
       <label><span class="normal">Your </span>confirmation code</label>
         <div class="confirmation_code split_input large_bottom_margin" data-multi-input-code="true">
                <div class="confirmation_code_group">
                    <div class="split_input_item input_wrapper"><input type="text" class="inline_input" maxlength="1"></div>
                    <div class="split_input_item input_wrapper"><input type="text" class="inline_input" maxlength="1"></div>
                    <div class="split_input_item input_wrapper"><input type="text" class="inline_input" maxlength="1"></div>
                </div>
                <div class="confirmation_code_span_cell">—</div>
                <div class="confirmation_code_group">
                    <div class="split_input_item input_wrapper"><input type="text" class="inline_input" maxlength="1"></div>
                    <div class="split_input_item input_wrapper"><input type="text" class="inline_input" maxlength="1"></div>
                    <div class="split_input_item input_wrapper"><input type="text" class="inline_input" maxlength="1"></div>
                </div>
            </div>
    
            </div><!-- endof col -->
    </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
32
33
34
35
36
37
.input_wrapper{position:relative}
.plastic_select, input[type=url], input[type=text], input[type=tel], input[type=number], input[type=email], input[type=password], select, textarea {
    font-size: 1.25rem;
    line-height: normal;
    padding: .75rem;
    border: 1px solid #C5C5C5;
    border-radius: .25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    color: #555459;
    width: 100%;
    max-width: 100%;
    font-family: Slack-Lato,appleLogo,sans-serif;
    margin: 0 0 .5rem;
    -webkit-transition: box-shadow 70ms ease-out,border-color 70ms ease-out;
    -moz-transition: box-shadow 70ms ease-out,border-color 70ms ease-out;
    transition: box-shadow 70ms ease-out,border-color 70ms ease-out;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-shadow: none;
    height: auto;
}
.no_touch .plastic_select:hover,.no_touch input:hover,.no_touch select:hover,.no_touch textarea:hover{border-color:#2780f8}
.focus,.plastic_select:active,.plastic_select:focus,input[type=url]:active,input[type=url]:focus,input[type=text]:active,input[type=text]:focus,input[type=number]:active,input[type=number]:focus,input[type=email]:active,input[type=email]:focus,input[type=password]:active,input[type=password]:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:#2780f8;box-shadow:0 0 7px rgba(39,128,248,.15);outline-offset:0;outline:0}
.large_bottom_margin {
    margin-bottom: 2rem!important;
}
.split_input{display:table;border-spacing:0}
.split_input_item{display:table-cell;border:1px solid #9e9ea6}
.split_input_item:not(:first-child){border-left:none}
.split_input_item:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}
.split_input_item:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}
.split_input_item.focused{border:1px double #2780f8;box-shadow:0 0 7px rgba(39,128,248,.3)}
.split_input_item input{height:5rem;text-align:center;font-size:2.5rem;border:none;background:0 0;box-shadow:none}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Email & Mobile verification"
Bootstrap 4.0.0 Snippet by faisalkhan123

Related: See More

Questions / Comments:

"Email & Mobile verification" Bootstrap 4.0.0 Snippet by faisalkhan123

Related: See More

Questions / Comments:

"Email & Mobile verification"
Bootstrap 4.0.0 Snippet by faisalkhan123