0

introducir el código aquíTengo una consulta con respecto a boostrap y su sistema de grid , estaba programando una galeria estilo mosaico y me estaba basando en gran medida en estos 2 porfolios

https://www.amysherrier.com/

https://lauraewingferrer.com/

Sobre todo la consulta viene por parte del segundo porfolio que tiene una galeria bastante llamativa donde algunas imagenes ocupan una fila y una columna y otras ocupan solo una posicion, hasta donde tengo entendido boostrap no permite expandir una columna o fila y esa es la consulta que les queria hacer comunidad , si se puede lograr un efecto parecido a la segunda galeria con boostrap 5 y la otra consulta es que consejo me pueden dar para normalizar las imagenes dal carrusel , supongo que yo mismo me tengo que encargar de poner imagenes de los mismos pixeles para que no se deforme el carrusel como el primer porfolio

Un ejemplo minimo para que se puedan dar una idea

https://batvizz.github.io/Ejemplo-Minimo/ilustration.html

introducir el código <div class="container ">
    <div class="row  m-3">
        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="imagenes/1.jpg" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="imagenes/2.jpg" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="imagenes/3.jpg" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="imagenes/imagen1.jpg" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="imagenes/imagen2.jpg" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="imagenes/imagen3.jpg" class="d-block w-100" alt="...">
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
        </div>
        <div class="col-lg-3 ">
            <img class="img-fluid  m-2" src="imagenes/imagen1.jpg" alt="">
        </div>
        <div class="col-lg-3 ">
            <img class="img-fluid m-2" src="imagenes/imagen2.jpg" alt="">
        </div>
        <div class="col-lg-3 ">
            <img class="img-fluid m-2" src="imagenes/imagen3.jpg" alt="">
        </div>
        <div class="col-lg-3 ">
            <img class="img-fluid m-2" src="imagenes/imagen4.jpg" alt="">
        </div>
        <div class="col-lg-3 ">
            <img class="img-fluid m-2" src="imagenes/imagen5.jpg" alt="">
        </div>
        <div class="col-lg-3 ">
            <img class="img-fluid m-2" src="imagenes/imagen6.jpg" alt="">
        </div>
        <div class="col-lg-3 ">
            <img class="img-fluid m-2" src="imagenes/imagen7.jpg" alt="">
        </div>
        <div class="col-lg-3 ">
            <img class="img-fluid m-2" src="imagenes/imagen9.jpg" alt="">
        </div>
        <div class="col-lg-3 ">
            <img class="img-fluid m-2" src="imagenes/imagen8.jpg" alt="">
        </div>
        <div class="col-lg-3 ">
            <img class="img-fluid m-2" src="imagenes/imagen10.jpg" alt="">
        </div>
        <div class="col-lg-3 ">
            <img class="img-fluid m-2" src="imagenes/imagen5.jpg" alt="">
        </div>
        <div class="col-lg-3 ">
            <img class="img-fluid m-2" src="imagenes/imagen4.jpg" alt="">
        </div>
    </div>
</div>aquí
3
  • Por favor edita tu pregunta y añade el ejemplo mínimo verificable usando las herramientas del sitio y no como un enlace externo. Saludos Commented el 31 oct. 2021 a las 16:51
  • Tendrías que mostrarnos un poquito lo que has hecho, lo que has intentado. Yo intentaría con Grid-areas. Commented el 31 oct. 2021 a las 17:07
  • ahora edito la pregunta @MauricioContreras para agregar el ejemplo minimo
    – Batvizz
    Commented el 31 oct. 2021 a las 17:14

1 respuesta 1

1

Lo que yo haría es utilizar grid-areas. Lo considero más fácil y adaptable que Bootstrap. A grid se lo considera como un paso más adelante que flex. Esto es muy potente y te permite hacer diseños responsive y todo. Acá, en este caso, vamos a utilizar una propiedad de CSS llamada grid-areas Te comparto mi código. HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section class="container">
        <div class="foto1">
            <img src="imagenes/(Frenos).jpg" alt="">
        </div>
        <div class="foto2">
            <img src="imagenes/(Frenos).jpg" alt="">
        </div>
        <div class="foto3">
            <img src="imagenes/(Frenos).jpg" alt="">
        </div>
        <div class="foto4">
            <img src="imagenes/(Frenos).jpg" alt="">
        </div>
        <div class="foto5">
            <img src="imagenes/(Frenos).jpg" alt="">
        </div>
        <div class="foto6">
            <img src="imagenes/(Frenos).jpg" alt="">
        </div>
    </section>
</body>
</html>

En CSS tenemos esto:

.container{
  display:grid;
  grid-template-areas:
    "foto1 foto2 foto3"
    "foto1 foto4 foto5"
    "foto1 foto4 foto6"
    ;
}
.foto1{
  grid-area:foto1;
  border:1px solid black;
}
.foto2{
  grid-area:foto2;
  border:1px solid black;
}
.foto3{
  grid-area:foto3;
  border:1px solid black;
}
.foto4{
  grid-area:foto4;
  border:1px solid black;
}
.foto5{
  grid-area:foto5;
  border:1px solid black;
}
.foto6{
  grid-area:foto6;
  border:1px solid black;
}

3
  • Gracias por responder Inkinvissible , esta interesante utilizar el grid-areas , lo unico que casi todo el porfolio ya esta trabajado con boostrap y no creo poder adaptar el css que me pasaste con el que boostrap me define , creo que se pisarian las propiedades css entre ellas
    – Batvizz
    Commented el 31 oct. 2021 a las 17:27
  • Eso se puede solucionar. Uno, usando los ID's, ya que tienen más importancia que las clases de Bootstrap, y por otra parte, usando !important. Con eso podrías hacer que el CSS no sea pisado por Bootstrap. Avisame cualquier cosa Commented el 31 oct. 2021 a las 17:30
  • @Batvizz considera aceptar la respuesta y votar si fue de ayuda, saludos
    – g.4
    Commented el 31 oct. 2021 a las 17:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.