How to remove padding from container-fluid in bootstrap5?

Question

Bootstrap

I'm using the container-fluid class to make the grid the full width of the screen! BUT there is one drawback! The padding on the container-fluid element is padded from the edge so the background doesn't fill flush to the screen! It is possible to override the .container-fluid {padding: 0} class, but I want to know if there is a built-in class or method for this?

Answer 1

Bootstrap has a whole set of utility classes for resetting/redefining indentation . Specifically, for setting zero padding, there are .p-0also its responsive counterparts, with breakpoints.
But in your case, as already correctly said above, the container is simply not needed. However, in order to avoid horizontal scrolling due to negative padding on .row, you will have to add the parent .overflow-hidden.

Answer 2

I figured out how to do this using the bootstrap px-0 and m-0 classes, they need to be added in 2 places. But how to stretch the right section to the end of the screen?