Сделаем для приложения Cat Photo App простой, оригинальный заголовок, для этого разместим картинку и текст заголовка на одной строке.

Помните, Bootstrap использует гибкую систему сетки, с ее помощью можно легко расположить элементы в одной строке и указать их относительную ширину. При этом большинство Bootstrap классов можно применить к элементу div.

На этой диаграмме показано как работает сетчатый макет Bootstrap состоящий из 12 столбцов:

Обратите внимание, что на картинке используется класс col-md-*. md значит "medium" (средний), а * - это количество столбцов, которые элемент займет по ширине. В данном случае мы указываем ширину элементов для экрана среднего размера, например ноутбука.

В нашем приложении Cat Photo App мы будем использовать класс col-xs-*, где xs значит "extra small", т.е. маленький экран, как у мобильного телефона, а * - это количество столбцов, которые элемент займет по ширине.

Поместите первую картинку и элемент h2 внутрь элемента <div class="row">. При этом элемент h2 должен быть внутри элемента <div class="col-xs-8">, а картинка внутри элемента <div class="col-xs-4">, чтобы в результате они были на одной строке.

Заметили как размер изображения подстроился под текст?