<!--
  navbar — задаёт шапку сайта,
  navbar-light, bg-light включают её светлую версию.
-->
<nav class="navbar navbar-light bg-light">
  <!-- Логотип или название сайта. -->
  <a class="navbar-brand" href="#">Шминтерест</a>

  <form class="form-inline">
    <!-- Кнопка с зеленой обводкой. -->
    <button class="btn btn-outline-success" type="submit">
      Добавить фото
    </button>
  </form>
</nav>

<!--
  jumbotron — лид, въезд на плашке.
-->
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <!-- display-3 увеличивает кегль и интерлиньяж. -->
    <h1 class="display-3">Арбатов</h1>
    <p class="lead">
      Нет, это не <nobr>Рио-де-Жанейро</nobr>,
      это гораздо хуже
    </p>
  </div>
</div>

<!--
  container-fluid — контейнер для содержимого страницы.
-->
<div class="container-fluid">
  <!--
    row — этаж, флекс-контейнер.
    justify-content-center выравнивает его содержимое
    по центру.
  -->
  <div class="row justify-content-center">
    <!--
      col-xs-12 заставляет элемент использовать
      все 12 колонок. col-lg-8 заставляет элемент
      использовать 8 колонок на широких экранах.
    -->
    <div class="col-xs-12 col-lg-8">
      <div class="card-columns">
        <!-- Карточка с картинкой или текстом. -->
        <div class="card">
          <img class="card-img"
            src="https://unsplash.it/250/500">
        </div>

        <!-- ... -->
      </div>
    </div>
  </div>
</div>