HTML – Ejemplo de inicio de sesion con Bootstrap 4

Ejemplo de inicio de sesion en HTML con Bootstrap4. Como se hace?. Paso a paso voy a ayudarte a llegar a esto:

login - Inicio de sesion
login – Inicio de sesion

Necesitaras agregar las siguientes lineas dentro del tag <HEAD></HEAD>:

<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--FRAMEWORK BOOTSTRAP para el estilo de la pagina-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- Los iconos tipo Solid de Fontawesome-->
<linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.0.8/css/solid.css">
<scriptsrc="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

<!-- Nuestro css-->
<linkrel="stylesheet"type="text/css"href="static/css/index.css">
Markup

Tambien puedes mirar mi repositorio en github para seguir paso a paso mi tutorial.

https://github.com/cruizg93/CristianRuizBlog-LoginForm

Deja abajo los comentarios o preguntas que tengas.

Gracias por ver este post,

@Cruizg93

7 Replies to “HTML – Ejemplo de inicio de sesion con Bootstrap 4”

  1. Hola Cristian, por ahora solo deseo agradecerte por tu gran apoyo a la cantidad de personas que queremos ser como tu. Te admiro por tu labor y empeño de ayudar a los démas. Apenas he ojeado tus posts y me parecen geniales, te seguiré en cada uno desde ahora y estoy seguro que aprenderé mucho contigo. Mil gracias.

    1. Hola Isain ya respondi en el video pero voy a poner la solucion aca tambien en caso de que alguien mas tenga la misma situacion que tu.

      Pregunta original en el video de youtube:
      “amigo, me salieron algunos problemas, a la hora de poner el background-color: #f2f2f2; en el . modal-content no me permite cambiar el color a ningún otro y el incono de candado definido por content: “\f023″; … no me sale ningún candado, de hecho probe con varios códigos y muchos no me salen, ojala me pudieras ayudar… Gracias”

      Solucion:
      1) Model-content background color: tu agregas primero tu index.css y puedes modificar el color, pero luego lo estas sobrescribiendo cuando agregas el css de bootstrap.

      Tienes dos opciones, agrega !important despues del color en tu css o mueves tu archivo mas abajo del bootstrap css.

      ejemplo #1 (index.css):
      .model-content{
      ….. otras propiedades
      background-color: #f2f2f2 !important
      }
      ejemplo #2 (index.html):

      ….. …..

      2)Para los iconos, no entiendo porque el tipo de libreria “all” tiene ese problema, probablemente porque es la version gratis y no la paga. Reemplaza tu link de “fontawasome” por la version “solid”

      
  2. Hola… Cuando trato de poner los iconos de fontawesome no me los toma…. que crees tu que pueda ser??… adjunto codigo

    https://use.fontawesome.com/releases/v5.0.7/js/all.js

    css

    .form-group::before{
    font-family: “Font Awesome\ 5 Free”;
    position: absolute;
    left: 28px;
    font-size: 22px;
    padding-top:4px;
    font-weight: 900;
    }

    .form-group#user-group::before{
    content: “\f007”;
    }

    .form-group#contrasena-group::before{
    content: “\f023”;
    }

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *