How to align text with a imagen using Bootstrap and Css - css

Question

Im creating a web app and I need to know how to align images with text. Right now, I have this:
What I want it to have the image on the left with it description on the right. The code Im using is this:
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://images-na.ssl-images-amazon.com/images/I/91epzdXTTHL._SX300_.jpg" alt="Lights" style="width:20%">
<div class="caption">
<pelicula tipo="accion" calificacion="Mayores de 13" estreno="26 de abril de 2019" ></pelicula>
<titulo>Titulo: Avengers Engame</titulo><br />
<director>Dirección: Joe and Anthony Russo</director><br />
<productor>Producción: Kevin Feige</productor><br />
<guion>Guión: Cristhoper Markus y Stephen McFeely</guion><br />
<musica>Música: Alan Silvestri</musica><br />
<duracion>Duración: 181 minutos</duracion><br />
<productora>Productora: Marvel Studios</productora><br />
<Presupuesto>Presupuesto: 356.000.000 $</Presupuesto><br />
<Recaudacion>Recaudación: 2.800.000.000 $</Recaudacion><br /
<Comentarios> Comentario: Una de las peliculas mas esperadas del año. El desenlace final la guerra del infinito. </Comentarios><br />
</div>
</div>
</div>
</div>

Answer 1

You could provide a Codepen example, it would be useful to other developers.
Anyway, you can accomplish this with the flexbox:
.thumbnail {
display: flex;
}
Another way would be to use the bootstrap grid or using CSS float.

Answer 2

use bootstrap flex to do https://getbootstrap.com/docs/4.5/utilities/flex/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex align-items-center p-2 text-white-50 rounded shadow-sm" style="background-color:var(--purple)">
<img src="https://images-na.ssl-images-amazon.com/images/I/91epzdXTTHL._SX300_.jpg" alt="Lights" style="width:30%">
<div class="lh-100 ml-3">
<div class="caption">
<pelicula tipo="accion" calificacion="Mayores de 13" estreno="26 de abril de 2019"></pelicula>
<titulo>Titulo: Avengers Engame</titulo><br />
<director>Dirección: Joe and Anthony Russo</director><br />
<productor>Producción: Kevin Feige</productor><br />
<guion>Guión: Cristhoper Markus y Stephen McFeely</guion><br />
<musica>Música: Alan Silvestri</musica><br />
<duracion>Duración: 181 minutos</duracion><br />
<productora>Productora: Marvel Studios</productora><br />
<Presupuesto>Presupuesto: 356.000.000 $</Presupuesto><br />
<Recaudacion>Recaudación: 2.800.000.000 $</Recaudacion><br / <Comentarios> Comentario: Una de las peliculas mas esperadas del año. El desenlace final la guerra del infinito. </Comentarios><br />
</div>
</div>

Answer 3

This is very simple with flex function in css. Add display: flex; to .thumbnail class. If you don't know about display flex refer below sites.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.w3schools.com/css/css3_flexbox.asp
<div class="row">
<div class="col-md-4" style="background: yellowgreen;">
<div class="thumbnail" style="display: flex;padding: 10px;">
<img src="https://images-na.ssl-images-amazon.com/images/I/91epzdXTTHL._SX300_.jpg" alt="Lights" style="width:20%;">
<div class="caption" style="margin-left: 20px; ">
<pelicula tipo="accion" calificacion="Mayores de 13" estreno="26 de abril de 2019" ></pelicula>
<titulo>Titulo: Avengers Engame</titulo><br />
<director>Dirección: Joe and Anthony Russo</director><br />
<productor>Producción: Kevin Feige</productor><br />
<guion>Guión: Cristhoper Markus y Stephen McFeely</guion><br />
<musica>Música: Alan Silvestri</musica><br />
<duracion>Duración: 181 minutos</duracion><br />
<productora>Productora: Marvel Studios</productora><br />
<Presupuesto>Presupuesto: 356.000.000 $</Presupuesto><br />
<Recaudacion>Recaudación: 2.800.000.000 $</Recaudacion><br /
<Comentarios> Comentario: Una de las peliculas mas esperadas del año. El desenlace final la guerra del infinito. </Comentarios><br />
</div>
</div>
</div>