dash-bootstrap-components
dash-bootstrap-components copied to clipboard
Documentation about Layouts and usage of containers. Need Clarification
Hi,
I'm new to everything web-development, which makes it hard for me to wrap my head around all nuance when it comes to using the dbc Layout System. The first rule stated in the docs is:
Only use Row and Col inside a Container.
This comes with some issues regarding padding of components in a layout, where I want nothing but thin borders between my columns. The docs suggest to use class_name="g-0" (on the row) in order to get rid of the padding between columns and links to the gutters docs of bootstrap.
They, however, suggest not using a container when going for an "edge to edge design":
No gutters The gutters between columns in our predefined grid classes can be removed with .g-0. This removes the negative margins from .row and the horizontal padding from all immediate children columns. Need an edge-to-edge design? Drop the parent .container or .container-fluid.
This is basically solving my layout problem. Before, I put a container inside a row. in order to put rows inside that container and no matter where I put class_name="g-0", something was either not filling out the available space or it was overflowing into the neighboring column.
Therefore the rule in the docs about always using a container seems a little too stiff.
Hi @MattesR
Thanks for opening this and apologies it's taken a while to come back to you.
That's very interesting what you point out about the docs saying that for edge-to-edge designs the container is actually not recommended. It seems somewhat contradictory to the docs on container itself
Containers are the most basic layout element in Bootstrap and are required when using our default grid system.
This is where the recommendation in our docs is coming from. Perhaps gutterless layouts / edge-to-edge designs don't count as the "default grid system"?
Not quite sure what to do here. The recommendation to use Container by default was added because many people who weren't using it were having different issues with their layouts. That being said I can see that there is clearly a use case where that is not appropriate. Perhaps the best thing to do would be to recommend a Container by default and then note the exception inside the example for gutterless layouts?