Bootstrap классы: Шпаргалка по Bootstrap 4 — список классов Bootstrap – Bootstrap Бутстрап Классы

Bootstrap Бутстрап Классы

.active	Добавляет серый цвет фона в строку таблицы ( <tr> или ячейку таблицы ( <td> ) (тот же цвет используется при наведении)		Tables
.active	Добавляет серый цвет фона к активной ссылке по умолчанию навигационной навигации. Добавляет черный фон и белый цвет к текущей ссылке внутри инвертированной навигационной навигации.		Navbar
.active	Добавление синего цвета фона к элементу активного списка в группе списков		List Groups
.active	Добавление синего цвета фона для имитации нажатой кнопки		Buttons
.active	Анимация полосового индикатора выполнения		Progress Bars
.active	Добавляет синий цвет фона для активного раскрывающегося элемента в раскрывающемся списке		Dropdowns
.active	Добавление синего цвета фона в активную ссылку разбиения на страницы (для выделения текущей страницы)		Pagination
.affix	Подключаемый модуль позволяет элементу становиться прикрепленным (заблокированным/липким) к области на странице. Включение position:fixed и отключение		Affix
.alert	Создает окно сообщения предупреждения		Alerts
.alert-danger	Красная коробка тревоги. Указывает на опасное или потенциально отрицательное действие		Alerts
.alert-dismissible	Вместе с .close классом этот класс используется для закрытия оповещения		Alerts
.alert-info	Светло-синяя коробка оповещения. Указывает некоторую информацию		Alerts
.alert-link	Используется на ссылки внутри оповещения, чтобы добавить соответствующие цветные ссылки		Alerts
.alert-success	Зеленая коробка тревоги. Указывает на успешное или положительное действие		Alerts
.alert-warning	Желтая коробка оповещения. Указывает на осторожность следует принимать с этим действием		Alerts
.badge	Создает круглый значок (серый круг-часто используется в качестве числового индикатора)		Badges
.bg-danger	Добавляет красный цвет фона к элементу. Представляет опасность или отрицательное действие		Helpers
.bg-info	Добавляет голубой цвет фона к элементу. Представляет некоторую информацию

Bootstrap 3 — Вспомогательные классы

На этом уроке мы познакомимся со вспомогательными классами Twitter Bootstrap 3.

В Twitter Bootstrap 3 имеются вспомогательные акцентные классы, с помощью которых вы можете установить цвет некоторому фрагменту тексту. Кроме текста эти классы также можно применять к ссылкам, которые не только изменяют цвет данной ссылки, но и делают её темнее при поднесении к ней курсора.

Например:

<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<a href="#">Пример ссылки</a> 
<a href="#">Пример ссылки</a> 
<a href="#">Пример ссылки</a> 
<a href="#">Пример ссылки</a> 
<a href="#">Пример ссылки</a> 
<a href="#">Пример ссылки</a> 

Текст:

Lorem ipsum dolor sit amet. Officiis debitis aut reiciendis voluptatibus maiores alias consequatur aut fugit.

Sint et dolorum fuga sit voluptatem accusantium. Cum soluta nobis est et dolorum fuga obcaecati cupiditate.

Delectus, ut aut perferendis doloribus asperiores repellat.. Excepturi sint, obcaecati cupiditate non provident, similique sunt.

Optio, cumque nihil impedit, quo minus. Similique sunt in culpa. Nam libero tempore, cum soluta.

Magni dolores et voluptates repudiandae. Voluptatem sequi nesciunt, neque porro quisquam est, omnis dolor repellendus quibusdam.

Repudiandae sint et aut fugit. Odit aut fugit, sed quia dolor sit, aspernatur aut rerum. Consectetur, adipisci velit, sed ut enim ipsam voluptatem, quia consequuntur magni.

Ссылки:

Примечание: Иногда акцентные классы могут не изменить цвет текста, который заключен в некоторый элемент в связи c влияния на данный элемент стилей других классов или селекторов. В большинстве случаев для решения подобной проблемы достаточно обернуть данный текст с помощью элемента

span и добавить к нему акцентный класс.

Кроме классов, предназначенных для выделения текста цветом, в Twitter Bootstrap 3 есть ещё несколько классов, которые предназначены для установления цветного фона блочным элементам HTML.

Например:

<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<a href="#">Пример ссылки</a> 
<a href="#">Пример ссылки</a> 
<a href="#">Пример ссылки</a> 
<a href="#">Пример ссылки</a> 
<a href="#">Пример ссылки</a> 

Абзацы с различным фоном:

Lorem ipsum dolor sit amet. Officiis debitis aut reiciendis voluptatibus maiores alias consequatur aut fugit.

Sint et dolorum fuga sit voluptatem accusantium. Cum soluta nobis est et dolorum fuga obcaecati cupiditate.

Delectus, ut aut perferendis doloribus asperiores repellat.. Excepturi sint, obcaecati cupiditate non provident, similique sunt.

Optio, cumque nihil impedit, quo minus. Similique sunt in culpa. Nam libero tempore, cum soluta.

Magni dolores et voluptates repudiandae. Voluptatem sequi nesciunt, neque porro quisquam est, omnis dolor repellendus quibusdam.

Ссылки:

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

Иконка «Close» применяется для закрытия модальных окон (modals) и сообщений (alerts).

<button type="button" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

× Компонент alerts (сообщение) c кнопкой, которая закрывает данное сообщение

Значок «Carets» указывает на наличие у элемента выпадающего списка. Кроме этого этот значок также указывает направление, в каком данный список будет выпадать (вверх или вниз).

<span></span>

Данные классы предназначены для создания плавающих элементов, которые смещаются насколько возможно влево (класс .pull-left) или вправо (.pull-right). Кроме этого в данные классы добавлено правило !important, которое повышает приоритет свойства float и предотвращает данные классы Bootstrap от возможных проблем.

<div>...</div>
<div>...</div>

Примечание: классы .pull-left

и .pull-right нельзя использовать для выравнивания элементов в компоненте navbar. Если вы хотите выровнять некоторые элементы в навигационном меню, то используйте специальные предназначенные для этого служебные классы .navbar-left и .navbar-right. Более подробно познакомиться с данными классами можно в статье, посвященной рассмотрению компонента navbar.

Класс .center-block предназначен для центрирования блочных элементов. Т.е. если к элементу применить класс .center-block, то он делает данный элемент блочным (display:block) и центрирует его в горизонтальном направлении по центру (margin: 0 auto).

<div>...</div>

Класс .clerfix предназначен для отмены обтекания элемента, к которому он добавлен, другими плавающими блоками.

<div>...</div>

Например, рассмотрим создания макета, состоящего из 4 блоков, каждый из которых должен занимать по 6 колонок Twitter Bootstrap. Причём блоки 3 и 4 должны располагаться с новой строки.

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

<div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Чтобы расположить блоки в соответствии с заданием, нам необходимо, чтобы блоки 3 и 4 не обтекали блоки 1 и 2. Следовательно, нам необходимо расположить пустой блок div с классом .clearfix

до блоков 3 и 4. Этот пустой блок с классом .clearfix запретит блокам расположенным после него, т.е. блокам 3 и 4 его обтекать.

<div>
  <div>...</div>
  <div>...</div>
  <div></div>
  <div>...</div>
  <div>...</div>
</div>

Чтобы заставить элемент отобразиться или скрыться вы можете использовать классы .show (display: block !important) и .hidden (display: none !important; visibility: hidden !important). Эти классы так же как классы .pull-left и .pull-right имеют правило !important, которое повышает приоритет стилей данных классов перед стилями других классов или селекторов, которые могут эти стили вытеснить. Данные классы можно применять только к блочным элементам HTML.

Кроме того, в Bootstrap есть ещё один класс .invisible, который предназначен для отключения видимости элемента, к которому он применён. Но, в отличие от вышеперечисленных классов, данный класс не изменяет свойство display у элемента и, следовательно, он по-прежнему занимает место, хоть и становится не видимым.

<div>...</div>
<div>...</div>
<div>...</div>

В Twitter Bootstrap 3 разработан специальный класс (.sr-only), с помощью которого вы можете настроить свой сайт под вспомогательные технологии (чтение голосом текста, картинок, меню и других элементов с экрана).

Класс .sr-only применяется для скрытия элемента на всех устройствах кроме технологий, осуществляющих чтение с экрана. Также класс .sr-only можно объединить с классом .sr-only-focusable, в этом случае элемент, к которому применены данные классы, будет отображаться на экране, но только в момент времени его нахождения в фокусе (например: при использовании клавиатуры).

<body>
  <!-- Ссылка для перехода к основному контенту сайта -->
  <a href="#content">Перейти к основному содержанию страницы</a>
  ...
  <div>
    <!-- Основной контент страницы -->
  </div>
</body>

В Twitter Bootstrap 3 разработан специальный класс .text-hide, который можно применить к элементу для того чтобы в нём скрыть текст. Например, это можно использовать, чтобы заменить скрытый текст фоновым изображением.

<h2>Текст этого заголовка не видим</h2>
<p>Текст этого абзаца не видим</p>

Bootstrap Бутстрап Вспомогательные классы справка

---

Текст

Добавьте значение через Text-Colors с классами ниже. Ссылки будут затемнены при наведении:

Класс	Описание
.text-muted	Текст, стилизованный под класс «текст-приглушенный»
.text-primary	Текст, стилизованный под класс «Text-Primary»
.text-success	Текстовый стиль с классом «Text-Success»
.text-info	Текст, стилизованный под класс «Text-info»
.text-warning	Текст в стиле с классом «текст-предупреждение»
.text-danger	Текст, стилизованный под класс «Text-опасность»

Фон

Добавить значение через фон-цвета с классами ниже. Ссылки затемнить на Hover так же, как текстовые классы:

Класс	Описание
.bg-primary	Ячейка таблицы стилизована под класс «BG-Primary»
.bg-success	Ячейка таблицы стилизована под класс «BG-Success»
.bg-info	Ячейка таблицы стилизована под класс «BG-info»
.bg-warning	Ячейка таблицы стилизована под класс «BG-warning»
.bg-danger	Ячейка таблицы стилизована под класс «BG-опасность»

Другие

Класс	Описание
.pull-left	Поплавок элемента влево
.pull-right	Поплавок элемента вправо
.center-block	Задает отображаемый элемент: блок с полями справа: авто и поле слева: Авто
.clearfix	Очищает поплавки
.show	Вынуждает элемент быть показанным (дисплей: блок)
.hidden	Заставляет элемент быть скрытым (отображение: нет)
.invisible	Заставляет элемент быть невидимым (видимость: скрытый). Займет место на странице, даже если она невидима
.sr-only	Скрытие элемента для всех устройств, Кроме программ чтения с экрана
.sr-only-focusable	Объедините с. SR-только для отображения элемента снова, когда он сфокусирован (например, пользователь с клавиатурой)
.text-hide	Помогает заменить текстовое содержимое элемента фоновым изображением
.close	Указывает значок закрытия
.caret	Указывает функциональность раскрывающегося списка (будет автоматически отменено в дропуп меню)

---

---

Отзывчивые утилиты

Эти классы используются для отображения и/или скрытия содержимого на устройстве с помощью запросов мультимедиа.

Используйте один или комбинацию доступных классов для переключения содержимого между точками просмотра.

Classes	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
.visible-xs-*	Visible	Hidden	Hidden	Hidden
.visible-sm-*	Hidden	Visible	Hidden	Hidden
.visible-md-*	Hidden	Hidden	Visible	Hidden
.visible-lg-*	Hidden	Hidden	Hidden

Шпаргалка для сравнения классов Twitter Bootstrap и Zurb Foundation / Habr

Zurb Foundation — это крутой фронтэнд-фреймворк, являющийся достойной альтернативой бутстрапу, и стоит как минимум взглянуть на возможности Foundation, прежде чем отвергать его. Foundation имеет некоторые фичи, которых нет в Bootstrap.

Эта короткая статья является по сути шпаргалкой, призванной помочь разработчикам начать работать с Foundation после работы с Bootstrap. Мы сравним основные классы для обоих фреймворков. По большей части, оба фреймворка имеют набор основных компонентов (сетка, кнопки, формы, таблицы), под катом представлена таблица сравнения классов для этих компонентов.

Сравнение классов элементов

Элемент	Bootstrap	Foundation
Alert	.alert .alert-success .alert-danger .alert-info	.alert-box .success .warning .info .round .radius .secondary
Кнопки	.btn .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link .btn-lg .btn-sm .btn-xs .btn-block	.button .tiny .small .large .secondary .success .alert .radius .round .disabled .expand
Списки	.list-unstyled .list-inline	.inline-list (также обнуляет стилизацию)
Labels	.label .label-default .label-primary .label-success .label-info .label-warning .label-danger	.label .success .alert .secondary .round .radius
Таблицы	.table .table-striped .table-hover .table-bordered .table-condensed .active .success .info .warning .danger	Таблицы стилизованы без возможности изменять стили с помощью дополнительных классов фреймворка.
Панели	.panel .panel-default .panel-primary .panel-success .panel-info .panel-warning .panel-danger	.panel .callout .radius Нет других цветов и нет классов для добавления шапки панели.
Прогресс-бары	.progress-bar .progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger .progress-bar-striped .active	.progress .small-# .large-# .secondary .success .alert .radius .round
Утилиты для работы с текстом	.text-left .text-center .text-right .text-justify .text-nowrap .text-lowercase .text-uppercase .text-capitalize .text-muted .text-primary .text-success .text-info .text-warning .text-danger	.text-left .text-right .text-center .text-justify .small-text-left (также работает для medium, large, xlarge) .small-only-text-left (также работает для medium, large, xlarge) .small-text-center (также работает для medium, large, xlarge) .small-only-text-center (также работает для medium, large, xlarge) .small-text-right (также работает для medium, large, xlarge) .small-only-text-right (также работает для medium, large, xlarge) .small-text-justify (также работает для medium, large, xlarge) .small-only-text-justify (также работает для medium, large, xlarge)
Классы для скрытия / отображения элементов	.visible-*-block .visible-*-inline .visible-*-inline-block .hidden-xs .hidden-sm .hidden-md .hidden-lg	.show-for-small-only (medium, large, xlarge, xxlarge) .show-for-small-up (medium, large, xlarge, xxlarge) .hide-for-small-only (medium, large, xlarge, xxlarge) .hide-for-small-up (medium, large, xlarge, xxlarge) .show-for-landscape .show-for-portrait .show-for-touch .hide-for-touch .hidden-for-small-only (medium, large, xlarge, xxlarge) .hidden-for-medium-up (large, xlarge, xxlarge) .visible-for-small-only (medium, large, xlarge, xxlarge) .visible-for-medium-up (large, xlarge, xxlarge)

Сравнение классов для построения сетки

Bootstrap	Foundation
.container .container-fluid .row .col-xs-# .col-sm-# .col-md-# .col-lg-# .col-xs-offset-# .col-sm-offset-# .col-md-offset-# .col-lg-offset-#	.row .columns .small-# .medium-# .large-# .small-offset-# .medium-offset-# .large-offset-#

Вывод

Интересно видеть, как каждый фреймворк решает определенные задачи. Foundation использует универсальные классы, такие как .secondary, .success, .alert, .radius, и .round, в то время как Bootstrap добавляет к классам префиксы с названием элемента: .btn-, .alert-, и .panel-.

Эту шпаргалку также можно использовать в качестве пособия для сравнения этих двух фреймворков. Например, Foundation имеет много классов для работы с видимостью элемента, а Bootstrap более гибок в плане построения таблиц.

Эта статья должна служить простым руководством по миграции с одного фреймворка на другой. Если вам нужна помощь в поиске нужного класса, то пусть эта шпаргалка вам поможет.

Bootstrap классы — htmllab

Bootstrap классы

В этой заметке под Bootstrap классами будет понимать и рассматривать вспомогательные классы фреймворка, которые помогают окрашивать текст и фон HTML-элементов, выравнивать элементы, прятать и отображать HTML-элементы в том числе с учетом мобильной верстки; чистить обтекания (последствия работы свойства float). Подробней о этих CSS-классах можно прочитать на странице фреймворка или в видео этой заметки.

Bootstrap классы

Контекстные цвета текста

<p class=»text-muted»>…</p> приглушенный
<p class=»text-primary»>…</p> основной
<p class=»text-success»>…</p> подтверждающиц
<p class=»text-info»>…</p> информационный
<p class=»text-warning»>…</p> уведомляющий
<p class=»text-danger»>…</p> предостерегающий

Если классы не применяются из-за конфликтов с другими классами, просто оберните текст в span с этим же классом.

Контекстные цвета фона

<p class=»bg-primary»>…</p>
<p class=»bg-success»>…</p>
<p class=»bg-info»>…</p>
<p class=»bg-warning»>…</p>
<p class=»bg-danger»>…</p>

Результат работы:

оформление фона параграфа контекстным классом

Классы кнопок закрытия

Кнопка закрытия, похожая на те кнопки, что бывают в диалоговых и обычных окнах
<button type=»button» class=»close» aria-label=»Close»><span aria-hidden=»true»>&times;</span></button>
Стрелка дья выпадающего меню <span class=»caret»></span>

Классы обтекания

Классы .pull-left и .pull-right быстро создать плавающие элементы (float), но они не используются для выравнивания навигационных наборов. Для центрирования блочного элемента используется .center-block. ) Класс .clearfix — чистит последствия работы свойства float.

Запись опубликована в рубрике Курсы html с метками Bootstrap. Добавьте в закладки постоянную ссылку.

Медиа объект. Компоненты · Bootstrap

Документация и примеры для медиа-объекта Bootstrap по созданию высоко повторяющихся компонентов, таких как комментарии блога, твиты и т.п.

Пример

Медиа-объект (т.е. аватар слева от сообщения) помогает создать сложные повторяющиеся компоненты там, где некоторые графические компоненты («медиа», т.е. аватары, картинки. т.д.) расположены рядом с контентом, но не «обернуты» в него. Плюс, благодаря растяжимому контейнеру, это требует всего двух классов.

Ниже – пример одиночного «медиа-объекта». Только два класса потребовались для его создания – «оборачивающий» .media и .media-body, в котором лежит ваш контент. Паддинг и марджин могут настраиваться утилитами «спейсинга».

<div>
  <img src="..." alt="...">
  <div>
    <h5>Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

Баг №12 – строчные элементы не воспринимаются как растяжимые

IE10-11 не отстраивает строчные элементы, такие как ссылки и изображения (или псевдоэлементы ::before и ::after) как растяжимые элементы. Единственное решение здесь — установить «нестрочное» значение display (т.е. block, inline-block или flex). Мы предлагаем использовать для исправления этого бага класс .d-flex, одну из наших утилит отображения.

Источник: баги «растяжимости» на GitHub

Вложенность

Медиа-объекты могут иметь бесконечную вложенность, хотя мы рекомендуем знать меру. Располагайте вложенные классы .media внутри класса .media-body родительского медиа-объекта.

<div>
  <img src="..." alt="...">
  <div>
    <h5>Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <div>
      <a href="#">
        <img src="..." alt="...">
      </a>
      <div>
        <h5>Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>

Выравнивание

Медиафайл в медиа-объекте может быть выровнен утилитами флексбокса по верхнему краю (по умолчанию), посередине, или в конце контента вашего класса .media-body.

<div>
  <img src="..." alt="...">
  <div>
    <h5>Top-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

<div>
  <img src="..." alt="...">
  <div>
    <h5>Center-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

<div>
  <img src="..." alt="...">
  <div>
    <h5>Bottom-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

Порядок

Меняйте порядок контента в медиа-объектах, изменяя код HTML или добавлением стилей обычных флексбоксов для настройки свойства «order» (числовое значение).

<div>
  <div>
    <h5>Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
  <img src="..." alt="...">
</div>

Поскольку медиа-объект нетребователен к структуре документа, вы можете использовать их к списку элементов HTML. Так, добавьте класс .list-unstyled к вашим <ul> или <ol> для удаления браузерного оформления по умолчанию этих элементов, и тогда примените класс .media к вашим <li>. Как обычно, пользуйтесь утилитами спейсинга для точной настройки.

• Placeholder64x64

  List-based media object

  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

• Placeholder64x64

  List-based media object

  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

• Placeholder64x64

  List-based media object

  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<ul>
  <li>
    <img src="..." alt="...">
    <div>
      <h5>List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li>
    <img src="..." alt="...">
    <div>
      <h5>List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li>
    <img src="..." alt="...">
    <div>
      <h5>List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
</ul>