0

El Bootstrap lo tengo en local por eso no se ve reflejado en el Head.

El problema es que las 4 cards no se quieren separar y cuando agrego margins simplemente se estiran.

introducir la descripción de la imagen aquí

.logo{
    max-width: 240px;
    min-width: 220px;
}
.rosa{
    background-color: rgba(205, 18, 140, 0.397);
}
.gris{
    background-color: rgba(60, 76, 80, 0.397);
}

.down{
    height: 89.30vh;
}
.fondo{
    background-image: url(/assets/header.jpg);
    background-position: center center;
    background-size: cover;
}

.spacebet{
    display: flex;
    justify-content: space-around;
}

.altura{
    height:fit-content;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="css/bootstrap-grid.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/styles.css">

  <link rel="icon" href="assets/favicon.png"/>

    <title>ON SERVICE C.A. | TALLERES</title>
</head>

<!-- INICIO DEL BODY -->

<body>

<!-- NAV -->
  <nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
        <img src="/assets/logo.png" alt="Logo" class="d-inline-block align-text-top logo">
      </a>
      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
        <button class="btn rosa me-md-2" type="button">Salir</button>
      </div>
    </div>
  </nav>

<!-- BLOQUE DE CONTENIDO -->
<div class="container-fluid fondo">
  <div class="row down">
    <!-- BARRA IZQUIERDA -->
    <div class="col-3 rosa border border-4">
        
          <div class="row justify-content-center">
          <a class="btn btn-secondary col-8 mt-4" href="#">INICIO</a>
          <a class="btn btn-secondary col-8 mt-1" href="#">Manuales</a>
          <a class="btn btn-secondary col-8 mt-1" href="#">Formatos</a>
          <a class="btn btn-secondary col-8 mt-1" href="#">Cursos</a>
          <a class="btn btn-danger col-8 mt-5" href="#">VOLVER</a>
          </div>
    </div>
    <!-- BARRA DERECHA -->
    <div class="col-9 spacebet gris border-start-0 border border-4">
      <!-- 919.500x864 PIXELES DEL BLOQUE GRIS (YA TIENE LOS BORDES DE 4PX RESTADOS)-->

      <!--Bloque Taller Izquierdo-->
      <div class="card mt-4 altura" style="max-width: 430px;">
        <!--Cuadro superior I-->
        <div class="row g-0">
          <div class="col-md-4">
            <img src="..." class="img-fluid rounded-start" alt="...">
          </div>
          <div class="col-md-8">
            <div class="card-body">
              <h5 class="card-title">Card title I</h5>
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <a class="btn btn-secondary col-5 mt-1" href="#">Entrar</a>
            </div>
          </div>
        </div>
        <!--Cuadro inferior III-->
        <div class="row g-0">
          <div class="col-md-4">
            <img src="..." class="img-fluid rounded-start" alt="...">
          </div>
          <div class="col-md-8">
            <div class="card-body">
              <h5 class="card-title">Card title III</h5>
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <a class="btn btn-secondary col-5 mt-1" href="#">Entrar</a>
            </div>
          </div>
        </div>
      </div>

      <!--Bloque Taller Derecho-->
      <div class="card mt-4 altura" style="max-width: 430px;">
      <!--Cuadro superior II-->
      <div class="row g-0 separacion">
        <div class="col-md-4">
          <img src="..." class="img-fluid rounded-start" alt="...">
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">Card title II</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <a class="btn btn-secondary col-5 mt-1" href="#">Entrar</a>
          </div>
        </div>
      </div>
      <!--Cuadro inferior IV-->
      <div class="row g-0">
        <div class="col-md-4">
          <img src="..." class="img-fluid rounded-start" alt="...">
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">Card title IV</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <a class="btn btn-secondary col-5 mt-1" href="#">Entrar</a>
          </div>
        </div>
      </div>
    </div>
      
      <!--FIN BARRA CONTENIDO-->
    </div>
  </div>
</div>

<!-- Optional JavaScript; Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>

</body>

</html>

5
  • 2
    Antes deberías pasar por la sección Cómo preguntar y hacer el recorrido de bienvenida. Así comprobarás que tu pregunta tiene muchas deficiencias y no podemos ayudarte sin la información correcta el 14 mar. 2022 a las 16:59
  • 1
    En lugar de agregar ruido a la pregunta, debés describir el resultado esperado y el obtenido. Leé Cómo preguntar.
    – padaleiana
    el 14 mar. 2022 a las 17:43
  • @padaleiana Es un nuevo usuario, y se ha esforzado (tendrias que ver su primera pregunta), lo que ocurre es que no se ha dado a entender bien, pero yo creo que lo he captado y he dejado una respuesta que creo que es lo que busca, aunque no se la explico si no me lo dice, claro, son varios cambios y seria muy largo si realmente no lo quiere así.
    – masterguru
    el 14 mar. 2022 a las 17:45
  • 1
    @masterguru es nuevo colaborador, no nuevo usuario :) Además, recuerda que las respuestas son para todos, no solo para el autor de la pregunta (probablemente por eso te habrán votado negativo, no sé quién fue).
    – padaleiana
    el 14 mar. 2022 a las 17:49
  • Bueno, sea quien sea da igual, no me molesta y lo entiendo. Voy a redactarle la respuesta completa ahora que me ha confirmado que le sirve.
    – masterguru
    el 14 mar. 2022 a las 17:50

1 respuesta 1

1

Supongo que quieres algo así:

.logo{
    max-width: 240px;
    min-width: 220px;
}
.rosa{
    background-color: rgba(205, 18, 140, 0.397);
}
.gris{
    background-color: rgba(60, 76, 80, 0.397);
}

.down{
    height: 89.30vh;
}
.fondo{
    background-image: url(/assets/header.jpg);
    background-position: center center;
    background-size: cover;
}

.spacebet{
    display: flex;
    justify-content: space-around;
}

.altura{
    height:fit-content;
}
<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <link rel="icon" href="assets/favicon.png" />

    <title>ON SERVICE C.A. | TALLERES</title>


  </head>

  <!-- INICIO DEL BODY -->

  <body>

    <!-- NAV -->
    <nav class="navbar navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img src="/assets/logo.png" alt="Logo" class="d-inline-block align-text-top logo">
        </a>
        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
          <button class="btn rosa me-md-2" type="button">Salir</button>
        </div>
      </div>
    </nav>

    <!-- BLOQUE DE CONTENIDO -->
    <div class="container-fluid fondo">
      <div class="row down">
        <!-- BARRA IZQUIERDA -->
        <div class="col-3 rosa border border-4">

          <div class="row justify-content-center">
            <a class="btn btn-secondary col-8 mt-4" href="#">INICIO</a>
            <a class="btn btn-secondary col-8 mt-1" href="#">Manuales</a>
            <a class="btn btn-secondary col-8 mt-1" href="#">Formatos</a>
            <a class="btn btn-secondary col-8 mt-1" href="#">Cursos</a>
            <a class="btn btn-danger col-8 mt-5" href="#">VOLVER</a>
          </div>
        </div>
        <!-- BARRA DERECHA -->
        <div class="col-9 spacebet gris border-start-0 border border-4">
          <!-- 919.500x864 PIXELES DEL BLOQUE GRIS (YA TIENE LOS BORDES DE 4PX RESTADOS)-->

          <!--Bloque Taller Izquierdo-->
          <div class="row">
            <div class="col-auto">


              <div class="card mt-4 me-4 altura" style="max-width: 430px;">
                <!--Cuadro superior I-->
                <div class="row g-0">
                  <div class="col-md-4">
                    <img src="..." class="img-fluid rounded-start" alt="...">
                  </div>
                  <div class="col-md-8">
                    <div class="card-body">
                      <h5 class="card-title">Card title I</h5>
                      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                      <a class="btn btn-secondary col-5 mt-1" href="#">Entrar</a>
                    </div>
                  </div>
                </div>
                <!--Cuadro inferior III-->
              </div>
              <div class="card mt-4 me-4 altura" style="max-width: 430px;">
                <div class="row g-0">
                  <div class="col-md-4">
                    <img src="..." class="img-fluid rounded-start" alt="...">
                  </div>
                  <div class="col-md-8">
                    <div class="card-body">
                      <h5 class="card-title">Card title III</h5>
                      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                      <a class="btn btn-secondary col-5 mt-1" href="#">Entrar</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-auto">
              <!--Bloque Taller Derecho-->
              <div class="card mt-4 altura" style="max-width: 430px;">
                <!--Cuadro superior II-->
                <div class="row g-0 separacion">
                  <div class="col-md-4">
                    <img src="..." class="img-fluid rounded-start" alt="...">
                  </div>
                  <div class="col-md-8">
                    <div class="card-body">
                      <h5 class="card-title">Card title II</h5>
                      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                      <a class="btn btn-secondary col-5 mt-1" href="#">Entrar</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="card mt-4 altura" style="max-width: 430px;">
                <!--Cuadro inferior IV-->
                <div class="row g-0">
                  <div class="col-md-4">
                    <img src="..." class="img-fluid rounded-start" alt="...">
                  </div>
                  <div class="col-md-8">
                    <div class="card-body">
                      <h5 class="card-title">Card title IV</h5>
                      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                      <a class="btn btn-secondary col-5 mt-1" href="#">Entrar</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!--FIN BARRA CONTENIDO-->
        </div>
      </div>
    </div>

  </body>

</html>

Cambios realizados:

  1. Habias puesto los cards directamente en lugar de separarlos por columnas, y ademas tenias solo dos cards en lugar de 4, y lo que hacian era resituarse solos en el espacio que les dabas. Por eso he agregado las filas y columnas deseadas de este modo. Donde ponias esto:
<!--Bloque Taller Izquierdo-->
<div class="card mt-4 altura" style="max-width: 430px;">

lo he modificado por esto:

<!--Bloque Taller Izquierdo-->
<div class="row">
    <div class="col-auto">
<div class="card mt-4 me-4 altura" style="max-width: 430px;">

creando, de este modo una fila y una columna de ancho automático, y gracias al estilo de bootstrap me-4 (que agrega un margen derecho de valor 4) lo he separado por su derecha de la siguiente columna que luego definiremos. 2) Donde ponias esto:

<!--Cuadro inferior III-->

he cerrado el primer card y he abierto el segundo así:

<!--Cuadro inferior III-->
</div>
<div class="card mt-4 me-4 altura" style="max-width: 430px;">

donde de nuevo puedes ver el me-4 que nos separará horizontalmente de la siguiente columna.

  1. Donde ponias esto:
<!--Bloque Taller Derecho-->

lo he cambiado por esto:

  </div>
</div>
<div class="row">
  <div class="col-auto">
    <!--Bloque Taller Derecho-->

para cerrar tanto el anterior col-auto como el row, y a su vez, iniciar la segunda columna mediante otro col-auto.

  1. Y después, donde ponias esto:
<!--Cuadro inferior IV-->

lo he modificado por esto:

</div>
<div class="card mt-4 altura" style="max-width: 430px;">
<!--Cuadro inferior IV-->

por lo mismo de antes, para cerrar el tercer card y abrir el cuarto card.

  1. Y finalmente, donde ponias esto:
<!--FIN BARRA CONTENIDO-->

lo he cambiado por esto:

  </div>
</div>
<!--FIN BARRA CONTENIDO-->

para cerrar el col-auto y el row creados para la segunda columna.

3
  • Hola, si funciono! Por favor cuentame, como lo hiciste?! Muchas Gracias!!
    – Naitfis
    el 14 mar. 2022 a las 17:47
  • Vale, perfecto, tardare un poquito, han sido varias cosas a tener en cuenta... a ver si puedo redactarlo bien para que se entienda....
    – masterguru
    el 14 mar. 2022 a las 17:49
  • ya he leído a detalle los cambios, definitivamente tengo muchisimo que aprender, mil gracias por tu aporte y tu tiempo para responder!
    – Naitfis
    el 14 mar. 2022 a las 18:22

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.