es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Obtener el ‘card-title’ para comenzar justo encima de un div

29 Jul, 2023 Programación

Quiero que el ‘título’ comience justo encima de ‘first yeah’, la imagen también debería comenzar allí
introduce una descripción de la imagen aquí

He intentado varias formas (y con algunas clases), pero no he tenido éxito

El código de la tarjeta:
html
<div class="card border-dark">
<div class="card-body" style="background-color: #706747;">
<h1 class="card-title">
<p class="text-body">
<img src="/assets/logo.gif" alt="" width="60" height="48" class="d-inline-block">
{{cosos}} título
</p>
</h1>
<br>
<div class="d-flex flex-nowrap bd-highlight justify-content-center">
<div class="order-1 p-2 bd-highlight">Primer elemento flex</div>
<div class="order-2 p-2 bd-highlight">Segundo</div>
<div class="order-3 p-2 bd-highlight">Tercero</div>
<div class="order-4 p-2 bd-highlight">Final sí</div>
</div>
</div>
</div>

Estoy utilizando Bootstrap 5 para todo, no tengo clases o estilos propios

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr este diseño en Bootstrap 5, puedes utilizar la clase card-header para envolver el card-title y mover la imagen dentro de él. Luego, agrega la clase ms-3 a la imagen para darle un margen respecto al texto. Finalmente, agrega la clase card-img-top a la imagen para que comience justo encima del primer contenido.

    Aquí está el código HTML modificado:

    <div class="card border-dark">
  <img src="/assets/logo.gif" alt="" width="60" height="48" class="card-img-top">
  <div class="card-header">
    <h1 class="card-title">
      <p class="text-body d-inline-block">{{cosos}} título</p>
    </h1>
  </div>
  <div class="card-body" style="background-color: #706747;">
    <div class="d-flex flex-nowrap bd-highlight justify-content-center">
      <div class="order-1 p-2 bd-highlight">Primer elemento flexible</div>
      <div class="order-2 p-2 bd-highlight">Segundo</div>
      <div class="order-3 p-2 bd-highlight">Tercero</div>
      <div class="order-4 p-2 bd-highlight">Final yup</div>
    </div>
  </div>
</div>

    Este código moverá la imagen hacia la parte superior de la tarjeta y la colocará justo encima del primer contenido. Puedes ajustar los atributos width y height de la imagen según tus necesidades.

Comments are closed.