Как правильно построить блоки с помощью Bootstrap?

Question

[Анастасия]

Красными линиями выделена область блока container -> row

Я бы хотела div-у с текстом дать col-xl-4, а div-y с категориями col-xl-8. Но как видно на макете div с текстом выступает за блок container

Какие свойства задать блоку с текстом (col-xl-4), чтобы он был таким же как на макете и правильно адаптировался?

Comments

[ThunderCat]

скорее всего в текстовом блоке есть элементы заданные жесткой шириной, больше чем контейнер кол-4. Или маргин/паддинг. Все это можно увидеть в инспекторе, даже просто подсвечивая блоки понятно где примерно косяк.

[Анастасия]

ThunderCat, ThunderCat, это макет

[ThunderCat]

Анастасия, если это не верстка, то в чем вопрос? Либо дизайнер делает макет в размер сетки, либо для больших дисплеев поменяйте ширину контейнера.

Answer 1

[Алексей]

Использовать весь бутстрап или его сетку не для прототипирования, а для верстки по макету, когда у гридов поддержка браузеров более 93% - нонсенс.

На верстки по макетам просто используйте гриды, всегда, везде

Answer 2

[lRasterl]

Вы можете использовать flex. Создайте div class="d-flex justify-content-between" . В него закиньте два блока - первый отвечает за текст, второй за изображения. Вообще почитайте как работает свойство justify-content-between.