Greetings! I am in the process of developing a website using bootstrap v3.3.2.
My first query revolves around utilizing the grid system to correctly position the caption on the right side of the thumbnail, as illustrated below:
<div class="container">
<div class="thumbnail">
<div class="row">
<div class="col-md-6">
<a href="#">
<img class="img-responsive" src="images/pic.jpg">
</a>
</div>
<div class="col-md-6">
<div class="caption">
<h2>Title</h2>
<hr>
<p>When it comes to design specifications, they offer detailed information regarding product requirements and assembly processes. These specifications have been traditionally used in public contracts for various infrastructure projects like buildings and highways, reflecting the training received by architects and engineers.</p>
<hr>
<p class="caption-footer">
<a href="#" class="btn"><span class="glyphicon glyphicon-heart"></span> Like it</a>
<a href="#" class="btn"><span class="glyphicon glyphicon-share"></span> Share it</a>
</p>
</div>
</div>
</div>
</div>
</div>
The layout appears with a significant left margin next to the image, which becomes even more pronounced when resizing the screen and extends to both sides:
It seems that this issue may be triggered by the fixed width of col-md-6 within the grid system. Unfortunately, I am unsure how to address this concern.
My second question pertains to aligning two buttons at the bottom of the caption by introducing a new class named caption-footer. Regrettably, this approach did not yield the desired outcome.
Below is my CSS styling for the caption-footer class along with its current appearance:
.caption-footer{
position: absolute;
bottom:0;
left: 0;
}
I have explored multiple resources such as link1 and link2 but none seem to resolve my specific issues.
I would greatly appreciate any assistance provided. Thank you!