Sou novato ainda em desenvolvimento web e estou com um dúvida no meu formulário em colocar as duas linhas do formulário uma ao lado da outra no Bootstrap responsivo, sabendo que cada input irá trazer informações separadamente.
Exemplo:
Nome: ________________ Sobrenome: ______________
.group{
position:relative;
margin-bottom:20px;
}
.group input {
font-size:18px;
padding:7px 7px 5px 2px;
display:block;
width:80%;
border:none;
border-bottom:1px solid #B3AFAF;
}
.group input:focus { outline:none; }
/* LABEL ======================================= */
.group label {
color:#fff;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
.group input:focus ~ label, input:valid ~ label {
top:-15px;
font-size:14px;
color:#5264AE;
}
/* BOTTOM BARS ================================= */
.group .bar { position:relative; display:block; width:300px; }
.group .bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#5264AE;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.group .bar:before {
left:50%;
}
.group .bar:after {
right:50%;
}
/* active state */
.group input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
/* HIGHLIGHTER ================================== */
.group .highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
.group input:focus ~ .highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
<div class="group">
<input type="number" name="Phone" required="required"style="background-color:transparent"onkeydown="limit(this, 11);" onkeyup="limit(this,11);">
<span class="highlight"></span>
<span class="bar"></span><label>Usuario</label>
</div>
<div class="group">
<input type="password" name="password" required="required"><input type="hidden" name="senh" value="Trainer"style="background-color:transparent"onkeydown="limit(this, 4);" onkeyup="limit(this,4);">
<span class="highlight"></span>
<span class="bar"></span><label>Senha</label>