Diseño de un carrusel con formulario

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.

Video Maquetat un formulario sobre un carrusel
SUSCRÍBETE A NUESTRO CANAL SÍGUENOS EN FACEBOOK

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

¿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.

¿Quieres descargar el código fuente Diseño de un carrusel con formulario?
...por favor suscríbete gratuitamente para descargarlo

Bootstrap CSS HTML Javascript

Download

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 2521 veces | Publicado hace 10 meses

Curso Laravel 8 Página Web 100% Administrable

Mira el temario del curso en el siguiente link

VER EL CURSO

Logo Codea App

Develop your code

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021