1

Me gustaría lograr algo así:

Resultado deseado

Pero lo máximo que he logrado es lo siguiente:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>

<div class="row d-flex justify-content-between align-items-center">
    <div class="col-6">
        <span class="pr-4">
            <i class="fa fal fa-eye" style="font-size:16px"></i>
            <span class="card-text">3</span>
        </span>
        <span>
            <i class="fa fal fa-comment-alt" style="font-size:16px"></i>
            <span class="card-text">3</span>
        </span>
    </div>
    <div class="col-6">
        <div class="clearfix" style="margin-right: 1em;">
            <a href="/news/article/1" class="readMore">Read more</a>
        </div>
    </div>
</div>
<div class="row d-flex align-items-left">
    <div class="col-6">
        Published
    </div>
</div>

¿cómo puedo fusionar la columna 2 de la fila 1 con la columna 2 de la fila 2?

1 respuesta 1

1

Lo que buscas se cono ce como Nested rows o filas anidadas y son parte del sistema de grilla o Grid system. Aquí la documentación oficial.

Se trata de generar varias filas dentro de una fila y ordenar los elementos según tu necesidad.

<!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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <title>Hello, world!</title>
</head>

<body>
  <div class="row d-flex justify-content-between align-items-center">
    <div class="col-6">
      <div class="row">
        <div class="col-3">
          <i class="bi bi-eye"></i>
          <span class="card-text">3</span>
        </div>
        <div class="col-3">
          <i class="bi bi-chat"></i>
          <span class="card-text">3</span>
        </div>
      </div>
      <div class="row">
        <span class="card-text">Published</span>
      </div>
    </div>
    <div class="col-6">
      <div class="clearfix" style="margin-right: 1em;">
        <a href="/news/article/1" class="readMore">Read more</a>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

Cambié los íconos de FontAwesome por los que vienen incluidos en Bootstrap Icons y cambié los span que usas para los contadores por div ya que los span por defecto no son elementos inline, lo que genera un "salto de línea" entre ellos, pero puedes retomar lo que tienes y probar con ello.

2
  • 1
    Me ganaron la respuesta jeje. Pero aunque no viene al caso, también se pueden usar las clásicas tablas sin llegar a comprometer el diseño.
    – OCHOA
    Commented el 28 jul. 2023 a las 15:05
  • Gracias a ambos.
    – Carlos
    Commented el 28 jul. 2023 a las 15:49

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.