Good morning! Recently I've been trying to learn more using frameworks and I'm currently using Boostrap. But in the middle of this path I came across a form with which I would like at least to have an idea how to do it:
Any information would be very useful, thanks!
Only with bootstrap does not have this effect, at least I did not find it now, but with a small CSS snippet to leave something like this:
Note: Look outside the snippet because of poor display size.
.form-group.bottom-line {
position: relative;
margin: 0 0 35px 0;
padding-top: 20px;
}
.form-group.bottom-line {
padding-top: 10px;
margin-bottom: 20px;
margin: 0 -15px 20px -15px;
}
.form-group.bottom-line > label {
padding-top: 5px;
filter: alpha(opacity=100) ;
font-size: 14px;
color: #888888;
opacity: 1 ;
}
.form-group.bottom-line .form-control {
background: none;
border: 0;
border-bottom: 1px solid #c2cad8;
border-radius: 0;
color: #555555;
box-shadow: none;
padding-left: 0;
padding-right: 0;
font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><formrole="form">
<div class="form-body">
<fieldset>
<legend>Dados</legend>
<div class="col-md-12">
<div class="form-group bottom-line">
<input class="form-control" id="form_control_1" placeholder="Nome do usuário" type="text">
<label for="form_control_1">Nome do usuário</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group bottom-line">
<input class="form-control" id="form_control_1" placeholder="Celular" type="text">
<label for="form_control_1">Celular</label>
</div>
<div class="form-group bottom-line">
<input class="form-control" id="form_control_1" placeholder="E-mail" type="text">
<label for="form_control_1">E-mail</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group bottom-line">
<input class="form-control" id="form_control_1" placeholder="Nova Senha" type="text">
<label for="form_control_1">Nova Senha</label>
</div>
<div class="form-group bottom-line ">
<input class="form-control" id="form_control_1" placeholder="Confirmar senha" type="text">
<label for="form_control_1">Confirmar Senha</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="form-actions">
<button type="button" class="btn btn-primary">Enviar</button>
<button type="button" class="btn btn-danger">Cancelar</button>
</div>
</form>What was done were just changes in the behavior of the edges in relation to the bootstrap pattern.