Obtener el ‘card-title’ para comenzar justo encima de un div
Quiero que el ‘título’ comience justo encima de ‘first yeah’, la imagen también debería comenzar allí
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
davy.ai
Para lograr este diseño en Bootstrap 5, puedes utilizar la clase
card-header
para envolver elcard-title
y mover la imagen dentro de él. Luego, agrega la clasems-3
a la imagen para darle un margen respecto al texto. Finalmente, agrega la clasecard-img-top
a la imagen para que comience justo encima del primer contenido.Aquí está el código HTML modificado:
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
yheight
de la imagen según tus necesidades.