Как реализовать такое на bootstrap4?

Question

[Иван]

Сначала думал, что это можно сделать через таблицы, потом понял, что не вариант. Можно было бы сделать каждый элемент отдельно, но тогда из-за паддингов начнутся проблемы с бордер, как лучше сделать их? я подключил только bootstrap-grid.

Answer 1

[Aiode]

Могу ошибаться , но вот мой вариант
можно еще посмотреть классы bootstrap4 и поиграться с ними
https://codepen.io/Konoplitskiy/pen/RmyByO

Comments

[Иван]

Я так понимаю, это ещё надо что-то подключать из бутстрапа? у меня же только сетка включена.

[Aiode]

да я подключаю через cdn

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

в теге head

можно сделать как написал Тимур добавить в col-4 свой класс и его стилизовать,на сколько я знаю что это не рекомендовано но могу так же ошибатся!

[Иван]

Aiode, сделал то, что хотел, но появился вопрос. при уменьшении экрана до размеров телефона, как убрать border-right? некрасиво выглядит на экранах телефона. задать доп класс для каждой ячейки и указать через медиа чтобы отключал border-right? или есть по красивее способ?