Align span and textbox

Navigation
1

I have the following form to login but they do not line up.

I can not get the user and password span in the same line, that is, there is not a jump between the span and the input .

I'm using bootstrap 4. 

/* LOGIN */
.login {
background: #D8D8D8;
border-radius: 25px;
padding: 25px;
margin-top: 25px;
display: inline-block;
}

.btn-acceder {
margin-top: 15px;
}

.icon-left {
float: left;
margin-top: 2.5px;
margin-right: 5px;
}

.form-right {
float: right;
}

.checkbox-align {
text-align: right;
color: red;
float: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="login">
    <form class="form-signin" method="post">
    <h2 class="form-signin-heading">Inicio Sesion</h2>
    <div class="col-lg-10" role="form">
        <span class="fa fa-user icon-left col-lg-2 control-label"></span>
        <input type="text" id="userlogin" name="userlogin" class="form-control form-right" placeholder="Usuario" required autofocus>
    </div><br><br>
    <div class="col-lg-10" role="form">
        <span class="fa fa-unlock-alt icon-left col-lg-2 control-label" aria-hidden="true"></span>
        <input type="password" id="passlogin" name="passlogin" class="form-control form-right" placeholder="Contraseña" required>
    </div>
    <div class="checkbox"><br>
        <label>
        <input type="checkbox" value="remember-me"> Recordarme
        </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Acceder</button>
    </form>
</div>
</div>

I've tried using float that the span and the input are left and right but I can not get them to line up and finally with display: inline-block;

And the other thing is that I can not get the login box to be placed in the center, I've tried with center-block but it does not go to the center either.

What am I doing wrong?

    
asked by David 25.01.2018 в 20:42
source

3 answers

2

The problem is that you have span out of divs , just move them in, you can also apply margins to class .icon-left to adjust them. Here is an example with the code you have passed: 

/* LOGIN */
.login {
background: #D8D8D8;
border-radius: 25px;
padding: 25px;
margin-top: 25px;
display: inline-block;
}
.btn-acceder {
margin-top: 15px;
}
.col-lg-10{
  padding-left: 0 !important;
  display: inline;
  padding: 0;
}
.fa{
  width: auto !important;
}
.icon-left {
margin-top: 10px;
}

.form-right {
float: right;
}
.form-control{
  width: auto !important;
}
.checkbox-align {
text-align: right;
color: red;
float: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
<div class="login">
    <form class="form-signin" method="post">
    <h2 class="form-signin-heading">Inicio Sesion</h2>
    <div class="col-lg-10" role="form">
        <span class="fa fa-user icon-left col-lg-2 control-label"></span>
        <input type="text" id="userlogin" name="userlogin" class="form-control form-right" placeholder="Usuario" required autofocus>
    </div><br>
    <div class="col-lg-10" role="form"><br>
        <span class="fa fa-unlock-alt icon-left col-lg-2 control-label" aria-hidden="true"></span>
        <input type="password" id="passlogin" name="passlogin" class="form-control form-right" placeholder="Contraseña" required>
    </div>
    <div class="checkbox"><br>
        <label>
        <input type="checkbox" value="remember-me"> Recordarme
        </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Acceder</button>
    </form>
</div>
</div>
    
answered by 25.01.2018 / 20:59
source
0

To align in boostrap there is the form-group class to align the contained elements. 

<div class="form-group">
    <div class="input-group">
        <label for="uLogin" class="input-group-addon glyphicon glyphicon-user"></label>
        <input type="text" class="form-control" id="uLogin" placeholder="Login">
    </div>
</div>

Example

    
answered by 25.01.2018 в 20:49
0

Here is the official content that Bootstrap provides about the forms:

Forms - Bootstrap

The explanation to your problem and solution is in:

  

Horizontal form

Go to the link , and press CTRL + F and place < strong> "horizontal form"

I'm sure you'll find the solution to your question.

    
answered by 25.01.2018 в 23:33
Distinguish touch from scrolling How to read the value of an html block in C #?