Diseño de un carrusel con formulario

Diseño de un carrusel con formulario

Maquetat un formulario sobre un carrusel

¿Cómo hacer un carrusel en Bootstrap con un 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.

VER DEMO

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

Descarga código fuente 997

Talvez tiene el código fuente para descargar

Ver Código Fuente

Redactado por: , Leido 6818 veces

Más tutoriales de programación BOOTSTRAP

Codea App
Codea App FullStack

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

You Fb Tik Pin

© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022