Diseño de un carrusel con formulario

¿Cómo hacer un carrusel en Bootstrap con un formulario?

Video Maquetat un formulario sobre un carrusel

Para diseñar un formulario responsive encima de un carrusel de imágenes usando Bootstrap 4.5 vamos a usar las propiedades de la clase Card, veamos.

¿Cómo diseñar un carrusel con un formulario encima del carrusel usando Bootstrap?

Para diseñar un formulario responsive encima de un carrusel de imágenes usando Bootstrap 4.5 vamos a usar las propiedades de la clase Card, veamos.

  1. Obviamente debemos integrar Bootstrap a  nuestro proyecto 
  2. Luego creamos nuestro carrusel de imágenes con el componente de Bootstrap,
  3.  Creamos nuestro formulario
  4. Y Aplicamos la clase CARD y sus variantes para lograr dicho efecto o funcionalidad.

Puedes cambiar la posición de las columnas de acuerdo a tu diseño sea derecho o izquierdo, incluso puedes colocarlo centrado con la clase justify-content-center aplicando a la fila row.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CARRUSEL CON FORMULARIO BOOTSTRAP 4.5 CODEA APP</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<style>
    .carousel-item{
        min-height: 400px;
        background-size: cover;
    }
    
</style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">CODEA</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Tutoriales</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Blog</a>
            </li>
          </ul>
        </div>
      </nav>

      <div id="carouselExampleIndicators" class="carousel slide card" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active" style="background-image: url(img/slide_1.jpg);">
            
          </div>
          <div class="carousel-item" style="background-image: url(img/slide_2.jpg);">
            
          </div>
          <div class="carousel-item" style="background-image: url(img/slide_3.jpg);">
            
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>

        <div class="card-img-overlay">
            <div class="container">
                <div class="row justify-content-end align-items-center">
                    <div class="col-sm-8 d-sm-block d-none">
                        <h1 class="text-white">CARRUSEL CON FORMULARIO BOOTSTRAP 4.5</h1>
                    </div>
                    <div class="col-sm-4">
                        <div class="card shadow-lg">
                            <div class="card-body">
                                <form action="">
                                    <div class="form-group">
                                        <h2 class="h4 text-center text-info">Incríbete al Sorteo!!</h2>
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Nombre:">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Email:">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Celular:">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Dirección:">
                                        </div>
                                        <input type="submit" value="INSCRIBIRME" class="btn btn-outline-success btn-block">
        
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


      </div>    
      

    
</body>
</html>

Ideal para la portada o página principal de nuestro proyecto web, donde sea necesario. La magia la impone el uso de la clase card y sus variantes que nos provee la librería de desarrollo responsive Bootstrap. Hasta un próximo tutorial.

Para descargar el recurso de forma gratuita { crea una cuenta } gratis .

Descarga código fuente

ENTRAR PARA DESCARGAR 796

Redactado por: , Leido 5500 veces

CURSOS DE PROGRAMACIÓN CON PROYECTOS

© Todos los derechos reservados Codea App FullStack | Cursos de programación avanzados | 2020 - 2021