Bootstrap, как правильно выровнять заголовок справа от изображения в миниатюре и выровнять кнопку по нижней части заголовка?

Как указано в заголовке, я создаю веб-сайт с помощью начальной загрузки версии 3.3.2.

Первый вопрос заключается в том, что я использую систему сетки для выравнивания подписи справа от миниатюры, как показано ниже:

<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>A design specification provides explicit information about the requirements for a product and how the product is to be put together. It is the most traditional kind of specification, having been used historically in public contracting for buildings, highways, and other public works, and represents the kind of thinking in which architects and engineers have been trained.</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>

Что получается примерно так:

Как заметили, слева от изображения большой запас, что не идеально. И когда я изменил размер экрана, он стал более нежелательным, с большими отступами с обеих сторон, как показано ниже:

Я думаю, что это может быть вызвано системой сетки, поскольку col-md-6 имеет фиксированную ширину. Однако я не знаю, как это исправить.

Второй вопрос заключается в том, что я пытаюсь выровнять две кнопки по нижней части заголовка, добавив новый класс с именем caption-footer. Однако это не работает.

Ниже приведен мой файл CSS для заголовка и нижнего колонтитула класса и то, как он выглядит:

caption-footer{
  position: absolute;
  bottom:0;
  left: 0;
}

Я проверил довольно много ссылок здесь (например: link1 link2). Но ни один из них не подходит для моего случая.

Заранее благодарю за любую помощь!