Layout for displaying text and buttons next to a picture - html

Question

I want to acomplish something like this:
And so far after hours of learning bootstrap and playing with the grid system I managed to do this:
Code that I use:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<div class="row-fluid">
<div class="col-md-4">
<img class="img-responsive" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUxMDc1OTAzM15BMl5BanBnXkFtZTgwOTMwOTMyMDI#._V1_SY1000_CR0,0,674,1000_AL_.jpg" style="width: 130px; height: 200px">
</div>
<div class="col-md-8">
<div class="row">
<div class="text-title">Logan 2017</div>
<p>
Set in the future, Logan and Professor Charles Xavier must cope with the loss of the X-Men when a corporation lead by Nathaniel Essex is bent on destroying the world. With Logan's healing ...
</p>
</div>
<div class="row">
<button class="btn btn-warning btn-bold-text">IMDb</button>
<button class="btn btn-danger pull-right"><span class="glyphicon glyphicon-remove"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see, I want to be able to maximize the picture to the size of the panel, make buttons stick to bottom and fix the margin of the text.
Can someone help me ? Thanks!
I don't need anyone to do the code for me, just tell me what should I be looking for. Is there any spacing between columns in bootstrap ? I tried playing with margins and paddings but no chance of acomplishing what I want.

Answer 1

https://jsfiddle.net/0jv537r0/1/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="well" style="position: relative; background: #fff;">
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUxMDc1OTAzM15BMl5BanBnXkFtZTgwOTMwOTMyMDI#._V1_SY1000_CR0,0,674,1000_AL_.jpg">
</div>
<div class="col-xs-8">
<div class="text-title">Logan 2017</div>
<p>
Set in the future, Logan and Professor Charles Xavier must cope with the loss of the X-Men when a corporation lead by Nathaniel Essex is bent on destroying the world. With Logan's healing ...
</p>
</div>
</div>
<button class="btn btn-warning btn-bold-text" style="position: absolute; bottom: 20px; left: 33.33333333%;">IMDb</button>
<button class="btn btn-danger pull-right" style="position: absolute; bottom: 20px; right: 20px;"><span class="glyphicon glyphicon-remove"></span></button>
</div>
</div>
</div>
</div>
So, I changed it to a well instead of a panel since you wern't actually using any of the panel elements other than the border. My answer isn't 100% full proof, you'd want to bring the styles not inline and add specifics for different screen widths, but in a nutshell at least you can see what I did to accomplish your goal. You could also use flexbox and then keep the buttons inside the col-xs-8 because with felxbox you could make the height of the col-xs-8 element match the height of the image.
Your "problem" is a commong one. Placing elements at the bottom of a parent element. There is generally not an out of the box solution to accomplish this. You must use position absolute. This position elements based on their closest non static parent. You could do this on the col-xs-8 element but because it's height won't match that of the image, that won't work you need to move the buttons outside the column. (Columns by default in Bootstrap have a non static position).
Now there are countless ways to accomplish what you wanted I just chose the route closet to what you had. I might suggest the media object (http://getbootstrap.com/components/#media) native to bootstrap. Wrap the media element in a wrapper with a border and you should be close to what you want, but really, media, panel, wells they are all similar. That is why in Bootstrap 4 they have all been removed in favor of cards. You might be better off going with BS4 as well. It's getting closer and closer to release and I have a site fully done with the current alpha and it's pretty solid. We're about to push the project to production too.