6
I’m still novice in web development and I’m having a doubt in my form to put the two lines of the form next to each other in responsive Bootstrap, knowing that each input will bring information separately.
Example:
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>
you can post all the code.
– Marcelo Batista
My dear, take a look at this answer, I think it will help you:https://answall.com/questions/235749/centralizar-objetos-dentro-da-div/235751#235751
– Alexandre Cavaloti
yes Alexandre the example that Voce gave me this right but the rest of the form will be centralized right below. I need something that name and name stand next to each other and the rest centered below.
– Thalis Alison
my div are formatted in css3. kkk there is some class I can insert that separates it ?
– Thalis Alison
Hello Thalis Alison, welcome to Sopt! It seems that your code is incomplete. I edited your question, but you can improve it by clicking here. Since you’re new, I suggest you see how to ask a good question or if you still have doubts about how the site works, you can make a small tour around here.
– bio