30 junio, 2020
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.
Suscríbete a nuestro canal en Youtube
Suscríbirse¿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.
- Obviamente debemos integrar Bootstrap a nuestro proyecto
- Luego creamos nuestro carrusel de imágenes con el componente de Bootstrap,
- Creamos nuestro formulario
- 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.
Leido 8045 veces
