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

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

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

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

Расположите кнопки Like, Info и Delete на одной линии. Для этого оберните каждую кнопку в элемент <div class="col-xs-4">, а затем все три поместите в элемент <div class="row">.

Класс row применяется к элементу div, в который вложены все три кнопки.