Как сверстать такой элемент?

Question

[greenfox07]

Answer 1

[Максим Тимофеев]

Список, горизонтальное позиционирование его элементов, зеленый border. Внутри 4 строки, на второй по центру зеленый круг (border-radius: 50%; border-color: green;) с иконкой "check", на background - серая линия (можно просто куском картинки)
Что именно у Вас вызывает сложности? Или Вы ожидаете, что кто-то за Вас сверстает?

Comments

[snap44]

Это таблица, а не список.

[greenfox07]

верстать за меня не надо, интересует только способ

[Максим]

snap44, можно списком делать ,таблицей,блоками - нам слава Богу разработчики дали массы вариантов для решения любого вопроса.
Только вот в последнее время многие начинающие верстальщики превратили из Тостера и Стаковерфлоу способ получения на халялву...

[Максим Тимофеев]

snap44, почему таблица? Семантически это список. Перенос на малой ширине тоже проще сделать со списком. И вообще таблица пахнет 90-ми, в данном случае так точно.

[snap44]

Максим Тимофеев, если пахнет, надо мыть чаще. А на картинке я отчетливо вижу распределенные по строкам и столбцам данные.

[Максим Тимофеев]

snap44,

надо мыть чаще.

Вы часто таблицы моете?

я отчетливо вижу распределенные по строкам и столбцам

Я тоже, но тогда по Вашей логике и bootstrap должен был вместо row и col таблицу делать. И не делать .btn, потому как если похоже на кнопку, то это button.