Схема со стрелками (этапы) Bootstrap + CSS?

Question

[fair_play_93]

Друзья и коллеги, доброго дня!
Прошу помочь советом, реализовать следующее, к примеру, есть схема из 5 блоков - шагов.
К примеру - этапы развития. 1 блок показывает стрелкой на второй, второй на третий, и так далее...
Собственно вопрос, как правильно все это сверстать, используя bootstrap + css ?
Всем спасибо и хорошего дня!

Answer 1

[ixon]

Сделай сетку в 5 блоков, в каждый блок помести ещё один, который будет изображать стрелку и иметь параметры вроде этих:

display:block;
position:absolute;
right:-120px;

Примерное решение будет таким:
https://codepen.io/anon/pen/GBwRNm

Answer 2

[sdgroup14]

Я бы сделал без лишней разметки как то так https://codepen.io/sdgroup14/pen/ajQKbq . Так по сути breadcrumbs на сайте делают

Comments

[fair_play_93]

спасибо за ответ, предложение отличное, однако я не описал все сложности.
У меня 5 блоков, расположены по рядам 2-2-1:
1-1
|--|
1-1
|
1

[sdgroup14]

fair_play_93, высота известна блоков? или динамически?

[fair_play_93]

sdgroup14, высоту можно любую задать, это не принципиально

[sdgroup14]

fair_play_93, вообщем считаю будет хорошее решение таким) https://codepen.io/sdgroup14/pen/ajQKbq . Но опять же можно сделать без лишней разметки .group через flex: column но это "немного" больше стилей в css

[sdgroup14]

fair_play_93, либо опишите еще подробнее задачу)

[fair_play_93]

Спасибо за проявленный интерес. Если не брать во внимание внешний вид, нужно нечто такое, только по 2 блока в ряд, в третьем ряду, 1 блок (всего 5 блоков).

В целом, я знаю как сделать. На сайте используется bootstrap4 - блоки собрал, нужно добавить стрелки, и перемещение блока для адаптивности.

[sdgroup14]

дерзайте, удачи вам :)