Как в bootstrap5 у container-fluid убрать padding?

Question

[Junior Coder]

Я использую класс container-fluid чтобы сетка было во всю ширину экрана! НО есть один недостаток! Padding у элемента container-fluid делают отступы с края, поэтому заливка фона не происходит вплотную к экрану! Можно переопределить класс .container-fluid {padding: 0}, но я хочу узнать есть ли встроенный класс или метод для этого?

Comments

[Антон Литвиненко]

Вообще то у row не должно быть паддингов, а наоборот должны быть отрицательные маргины, компенсирующие паддинги у вложенных в row колонок. Если не нужны паддинги у контейнера, просто не используйте его, у него кроме паддингов больше и нет ничего такого, даже центровшика

[Junior Coder]

Антон Литвиненко, да у container-fluid а не row, я опечатался.

[Антон Литвиненко]

Евгений М, разберитесь с сеткой. Не нужны паддинги, не используйте контейнер-флюид, он только паддинги и даёт. Обычный контейнер имеет ещё центровщик. Родителем col может быть только row, а элементом внутри row только col. Для одной колонки не нужен ни row ни col. Используйте элементы сетки только для сетки

Answer 1

[Юрий]

Для сброса/переопределения отступов в бутстрапе есть целый набор utility-классов. Конкретно для задания нулевого паддинга есть .p-0 и его responsive-аналоги, с брейкпойнтами.
Но в вашем случае, как уже правильно сказали выше, контейнер просто не нужен. Однако чтобы не было горизонтального скролла из-за отрицательных отступов у .row, придётся добавить родителю .overflow-hidden.

Answer 2

[Junior Coder]

Разобрался как это сделать с помощью классов bootstrap px-0 и m-0 их нужно добавить в 2 местах. Но как растянуть правую секцию до конца экрана?