I would like to be able to position my code similar to this:
But no matter how much I think about it, I can't get it right.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-1">
<img src="img.png" alt="img" id="img" />
</div>
<div class="col-md-5 offset-md-1 text-center">
<p>Descripcion de la imagen</p>
</div>
<div class="col-md-2 offset-md-2 text-center">
<a class="btn btn-dark me-2" href="#" role="button" target="_blank"> boton</a>
</div>
<div class="col-md-2 offset-md-2 text-center">
<a class="btn btn-dark me-2" href="#" role="button" target="_blank"> boton</a>
</div>
</div>
</div>
I do not understand very well where you want to leave the image, so I have removed it.
But for the rest, you can be guided by bootstrap's grid-system .
It is enough to correctly assign values to obtain the expected result.
Now it will be enough for you to correct what you really want to show.
I've made some significant changes to your code, like leaving two div class="col", and inside the second column adding two class="row" , one for the text and one for the buttons(btn-group).