2

En todos los lados veo como hacer un formulario bootstrap pero no como editarlo con estilo. Tengo ya preparado un formulario login seguro. Pero la verdad, queda muy "cutre" Me gustaria ponerlo chulo

Este es mi formulario

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <form action="index.php" method="post">
                <div class="form-group">    
                    <label for="usu">Usuario:</label>
                    <input class="form-control" id="usu" type="text" name="txtlogin" required="true">
                </div>

                <div class="form-group">
                    <label for="pass">Password:</label>
                    <input class="form-control" id="pass" type="password" name="txtpass" required="true">
                </div>
                
                <input type="submit" class="btn btn-primary" value="Ingresar">    
            </form>
            <br>
            <div class="msg" id="msg">
                
            </div>
        </div>
    </div>
</div>

Que hace esto:

introducir la descripción de la imagen aquí

Es bastante simple y además pegado a la izquierda, que no entiendo por que el container no me lo pone centrado...

Pues lo que preguntaba, con bootstrap puedo hacer mi formulario así?:

introducir la descripción de la imagen aquí

o debo buscar otro tipo de formularios? ¿Cómo podria hacer mi formulario bonito? que se que vosotros hacéis las cosas "modernas" jejeje

Muchas gracias!

1 respuesta 1

4

Se puede hacer cualquier formulario en Bootstrap. Todo depende de la creatividad, es jugar con clases, crear estilos en CSS, etc.

Dejo es form, que es uno de miles de ejemplos que se puede hacer.

.card-container.card {
    max-width: 350px;
    padding: 40px 40px;
}

.btn {
    font-weight: 700;
    height: 36px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
}

/*
 * Card component
 */
.card {
    background-color: #F7F7F7;
    /* just in case there no content*/
    padding: 20px 25px 30px;
    margin: 0 auto 25px;
    margin-top: 50px;
    /* shadows and rounded borders */
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

.reauth-email {
    display: block;
    color: #404040;
    line-height: 2;
    margin-bottom: 10px;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.form-signin #inputEmail,
.form-signin #inputPassword {
    direction: ltr;
    height: 44px;
    font-size: 16px;
}

.form-signin input[type=email],
.form-signin input[type=password],
.form-signin input[type=text],
.form-signin button {
    width: 100%;
    display: block;
    margin-bottom: 10px;
    z-index: 1;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.form-signin .form-control:focus {
    border-color: rgb(104, 145, 162);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
}

.btn.btn-signin {
    /*background-color: #4d90fe; */
    background-color: rgb(104, 145, 162);
    /* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/
    padding: 0px;
    font-weight: 700;
    font-size: 14px;
    height: 36px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: none;
    -o-transition: all 0.218s;
    -moz-transition: all 0.218s;
    -webkit-transition: all 0.218s;
    transition: all 0.218s;
}

.btn.btn-signin:hover,
.btn.btn-signin:active,
.btn.btn-signin:focus {
    background-color: rgb(12, 97, 33);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->

<!--
    you can substitue the span of reauth email for a input with the email and
    include the remember me checkbox
    -->
    <div class="container">
        <div class="card card-container">
          <h1>Login</h1>
            <p id="profile-name" class="profile-name-card"></p>
            <form class="form-signin" action="index.php" method="post">
                <span id="reauth-email" class="reauth-email"></span>
                <input type="email" id="usu" class="form-control" placeholder="Usuario" required autofocus>
                <input type="password" id="pass" class="form-control" placeholder="Password" required>                
                <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Ingresar</button>
            </form>
        </div>
    </div>

1
  • es perfectoooo! Muchas gracias :)
    – Vidal
    Commented el 20 mar. 2018 a las 23:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.