Diseño de un carrusel con formulario

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

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

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.

<!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>

 

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 956 veces | Publicado hace 3 meses

Curso Flutter y Laravel Tienda Abarrotes con Delivery

Mira el temario del curso en el siguiente link
VER MÁS DETALLES DEL CURSO

Logo Codea App

Develop your code

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